5

検索パネルと結果データのコレクションを備えた Marionette CompositeView があります。

次の場合に関数を呼び出したい:

  • 検索パネルが表示されます。
  • コレクションはまだレンダリングされていません。
  • この関数は、コレクションがレンダリングされるときに呼び出されるべきではありません。

私はこのようにしました：（しかし、「afterRender」関数は2回呼び出されます）

// VIEW
App.MyComposite.View = Backbone.Marionette.CompositeView.extend({
    // TEMPLATE
    template: Handlebars.compile(templates.find('#composite-template').html()),
    // ITEM VIEW
    itemView: App.Item.View,
    // ITEM VIEW CONTAINER
    itemViewContainer: '#collection-block',

    //INITIALIZE
    initialize: function() {        
        this.bindTo(this,'render',this.afterRender);
    },

    afterRender: function () {
        //THIS IS EXECUTED TWICE...
    }

});

これどうやってするの？

==========================編集======================= ===========

私はこの方法で解決しました。観察があれば教えてください。

// VIEW
App.MyComposite.View = Backbone.Marionette.CompositeView.extend({

    //INITIALIZE
    initialize: function() {        
        //this.bindTo(this,'render',this.afterRender);
        this.firstRender = true;
    },

    onRender: function () {
        if (firstRender) {
            //DO STUFF HERE..............
            this.firstRender = false;         

        }
    }

});
4

2 に答える 2

11

Marionette は、そのすべてのビューに組み込みのメソッドを提供するため、呼び出しonRenderを取り除くことができます。this.bindTo(this, 'render', this.afterRender)


// VIEW
App.MyComposite.View = Backbone.Marionette.CompositeView.extend({
    // TEMPLATE
    template: Handlebars.compile(templates.find('#composite-template').html()),
    // ITEM VIEW
    itemView: App.Item.View,
    // ITEM VIEW CONTAINER
    itemViewContainer: '#collection-block',

    //INITIALIZE
    initialize: function() {        
        // this.bindTo(this,'render',this.afterRender); // <-- not needed
    },

    onRender: function () {
        // do stuff after it renders, here
    }

});

ただし、コレクションがレンダリングされていないときに機能しないようにするには、コレクションがレンダリングされたかどうかをチェックするロジックを onRender メソッドに追加する必要があります。

これは、コレクションからアイテムがレンダリングされていないときに、レンダリングで何をしようとしているかに大きく依存します。

たとえば...「アイテムが見つかりません」というメッセージを表示する場合はemptyView、複合ビューの組み込み構成を使用できます。


NoItemsFoundView = ItemView.extend({
  // ...
});

CompositeView.extend({

  emptyView: NoItemsFoundView

});

ただし、実行する必要のある特別なコードがあり、このオプションでカバーされない特定のことを行う場合は、独自のロジックを組み込む必要があります。


CompositeView.extend({

  onRender: function(){
    if (this.collection && this.collection.length === 0) {
      // do stuff here because the collection was not rendered
    }
  }

});
于 2012-08-31T11:58:24.057 に答える