2012-08-30 8 views
5

でCompositeViewの上のイベントをレンダリングします。は後に、私は、検索パネルと結果データの収集とマリオネットCompositeViewのを持ってBackbone.Marionette

私は、関数を呼び出したいとき:

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

私はこの方法でそれをやった。(ただし、「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); 
    }, 

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

}); 

私はこれをどのように行うことができますか?

========================== EDIT =================== ===============

私はあなたの観察を持っているなら、私に知らせてください、この方法でそれを解決しました。


// 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 
    } 

}); 

しかしコレクションがあるとき、それは仕事をしないために取得する:あなたがthis.bindTo(this, 'render', this.afterRender)コールを取り除くことができるように

// 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;   

     } 
    } 

}); 
+0

http://marionettejs.com/docs/marionette.view.html#view-onshowはあなたのイベントのバインディングにいくつかの詳細を記入してくださいと – schacki

+0

が呼び出されたときにrenederこれは、初期化関数でありますonShow機能を使用します(これを「this.bindTo、 'レンダリング'、this.afterRender) "私はこれが正しいかどうかは分かりませんが、私がしたいことは、ビューがレンダリングされたら "afterRender"関数を呼び出すことです。 –

答えて

11

マリオネットは、それのすべてのビューに組み込まれonRender方法を提供し、レンダリングされていない場合は、コレクションがレンダリングされたかどうかを調べるロジックを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 
    } 
    } 

}); 
+0

あなたの答えをありがとう。多分this: "this.collection.length> 0"は "this.collection.length == 0"で変更する必要があります –

+0

ドワーフ!はい、それを行う:) –

4

だけ

Backbone.Marionette.ItemView.extend({ 
    onShow: function(){ 
    // react to when a view has been shown 
    } 
}); 

関連する問題