Marionette.js ItemView - 地域に子ビューを置く

Question

私は以下のItemViewテンプレートを持っており、顧客データ（firstName、lastName）で満たされており、をdivに追加したいと思います。

テンプレート

<script type="text/html" id="template-customer-details"> 
    <h4><%= firstName %> <%= lastName %></h4> 
    <button class="edit">Edit</button> 
    <h5>Addresses</h5> 
    <div class="addresses">...</div> 
</script> 

レイアウトは、私はエラーを取得しています

Layout.Details = Backbone.Marionette.ItemView.extend({ 
    template: '#template-customer-details', 

    regions: { 
     addresses: ".addresses" 
    }, 

    serializeData: function() { 
     return this.model.attributes; 
    }, 

    initialize: function() { 

     this.addressList = new App.Models.AddressList(); 

     // Error! 
     this.regions.addresses.show(this.addressList); 

     this.bindTo(this, "render", this.$el.refresh, this.$el); 
     this.model.bind("change", this.render.bind(this)); 
    } 
}); 

は "キャッチされない例外TypeError：オブジェクト.addressesには方法は、 'show' がありません。"

ビューが読み込まれるまで待つ必要がありますか？

Answer 1

あなたは少し混乱していると思います。 ItemViewはregionsプロパティでは何もしません（Applicationクラスを考えている可能性があります）。this.regions.addresses.showを呼び出すと、".addresses".showと同じです。

ItemView（お客様のデータに使用できる）とAddressListに使用できるCollectionViewが組み合わされているため、おそらくCompositeViewを使用したいと思います。アドレスには別のItemViewを定義する必要があります（CollectionViewはコレクション内の各アイテムに対してItemViewを作成するだけです）。

（私がテストしていませんでしたので、完全に正確でない場合があります）少しこのような何か：

AddressView = Backbone.Marionette.ItemView.extend({ 
    template: '#addressTemplate' 
}); 

Layout.Details = Backbone.Marionette.CompositeView.extend({ 
    template: '#template-customer-details', 
    itemView: AddressView, 
    itemViewContainer: '.addresses' 
}); 

// Then create your view something like this: 
new Layout.Details({ 
    model: new App.Models.CustomerDetails(), 
    collection: new App.Models.AddressList() 
}); 

私はまた、あなたが、具体的&はのようなイベントをレンダリング変更をバインドする必要はないと思いますあなたの例では、通常、それを世話するでしょう（serializeDataの実装と同じですが、これはデフォルトの実装とあいまいであるようです）