Backbone Marionetteのアイテムビューインスタンスからコンポジットビューにアクセスする方法

Question

基本的な状況は次のとおりです。

コンポジットビューとアイテムビューがあります。モデルとコレクションを渡すコンポジットビューを作成します。モデルデータを使用して、コンポジットビューのテンプレートを設定します。コレクションデータを使用して、コンポジットビューのアイテムビューが作成されます。

私がしたいことは、アイテムビューのテンプレートヘルパーでコンポジットビューのモデルデータにアクセスしたいのです。アイテムビューのビューインスタンスにアクセスしています。コンポジットビューのハンドルを私に与えるかもしれないと思っていましたが、私はそのモデルに到達することができましたが、そうではありません。

私はこれを行う方法がありますか？そのアイテムビューインスタンスの1つからコンポジットビューインスタンスにアクセスしますか？

おかげ

--Justin Wyllie

Answer 1

親のデータにアクセスする場合は、CompositeViewを使用してさまざまなことを行うことができます。

1. いずれCompositeViewにitemViewOptionsヘルパー関数を介しItemViewに直接そのデータを渡します。注：このオプションは、Marionette 2のchildViewOptionsに変更されました。

2. CompositeViewからのすべての子ビューに対して直接メソッドを呼び出し、そのメソッドに渡します。

3. イベントをトリガーするか、またはItemViewで聴いてください。

これらのオプションはいずれも、子ビューから直接親ビューにアクセスすることはありませんが、必要な操作を行う必要はありません。以下は、これらのアプローチのそれぞれを使用してCompositeViewのモデルを子ビューに渡す方法のコードです。

// Pass model into ItemView on init 
var MyItemView = Backbone.Marionette.ItemView.extend({ 
    initialize : function (options) { 
    this.parentsModel = options.parentsModel; 
    } 
}); 
var MyCompView = Backbone.Marionette.CompositeView.extend({ 
    itemViewOptions : function() { return { parentsModel: this.model }; } 
    itemView : MyItemView 
}); 


// Invoke function on ItemView, passing data in 
var MyItemView = Backbone.Marionette.ItemView.extend({ 
    doSomethingWithParent : function (parentModel) { 
    // do cool thing with parentModel 
    } 
}); 
var MyCompView = Backbone.Marionette.CompositeView.extend({ 
    itemView : MyItemView, 
    onRender : function() { 
    this.children.call("doSomethingWithParent", this.model); 
    } 
}); 


// Trigger event that ItemView knows about 
var MyItemView = Backbone.Marionette.ItemView.extend({ 
    initialize : function() { 
    this.listenTo(this, "special:event", function (parentModel) { 
     // Do cool things 
    }); 
    } 
}); 
var MyCompView = Backbone.Marionette.CompositeView.extend({ 
    itemView : MyItemView, 
    onRender : function() { 
    this.children.each(_.bind(function (childView) { 
     childView.trigger("special:event", this.model); 
    }, this)); 
    } 
}); 

Answer 2

私は質問に答えていませんでした。しかし、アプローチを変えることは効果的です。代わりに、私は複合ビューからアイテムのビューにアクセスするアイテムビューから「親」複合ビューにアクセスしようとしているの：私は、現在のアイテムビューのモデルを変更することができます

https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.collectionview.md#onbeforeitemadded-callback

（値に基づいて、コンポジットビューのモデル）。

Answer 3

考え方私はAndrew Hubbsの提案がどのように私を助けたかを分かります。私は、私のアイテムテンプレートで親モデルのプロパティをインラインで表示しようとしていました。私は、MarionetteのtemplateHelpersプロパティを使用して、これをAndrewの提案の1つと組み合わせて使用​​しました。

<h1>Page {{name}}</h1> 
<h6>Children</h6> 
<ul></ul> 

例の項目テンプレート - myItemTemplate：

{{name}} is child of: {{getParentName}} 

再生回数：

App.module('App.View', function(View){ 

    View.MyItemView = Marionette.ItemView.extend({ 

     initialize: function(options) { 
      this.parentModel = options.parentModel; 
     }, 

     template: myItemTemplate, 

     tagName: 'li', 

     templateHelpers: function() { 

      var view = this; 

      return { 
       // Called by item template, returns parent model 'name' property. 
       getParentName: function() { 
        return view.parentModel.get('name'); 
       } 

      }; 
     } 

    }); 

    View.MyView = Marionette.CompositeView.extend({ 

     template: myViewTemplate, 

     itemView: View.MyItemView, 

     itemViewContainer: 'ul', 

     itemViewOptions: function() { 

      return { parentModel: this.model }; 

     } 

    }); 

}); 

- MYVIEWテンプレート

例コンポジットテンプレート：

私は例の簡単なを維持しようとしました

これがどのように実装されるかの例：

// example of how implementation 
// parent model has an attribute called 'children', which is a collection of models 
var children = parent.get('children'); 

var view = new App.View.MyView({ model: parent, collection: children }); 

App.mainRegion.show(view);