Marionette.js ItemView - 將子視圖放入區域

我有以下ItemView模板，其中填充了客戶數據（firstName，lastName），並且我想將CollectionView添加到div .addresses中。Marionette.js ItemView - 將子視圖放入區域

模板

<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)); 
    } 
});

我收到錯誤「遺漏的類型錯誤：對象.addresses有沒有方法 '秀'。」

我是否必須等待視圖加載？

來源

2012-12-18 Dennis

我覺得你已經有點困惑了。 ItemView不對regions屬性做任何事情（您可能會想到Application類），所以當您嘗試呼叫this.regions.addresses.show時，這與調用".addresses".show時相同。

我想你可能想在這種情況下使用CompositeView，因爲它將ItemView（可用於客戶數據）和CollectionView（可用於AddressList）組合使用。您還需要爲地址定義單獨的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的實現一樣，它看起來像默認實現一樣）

來源

2012-12-18 21:51:03 obmarg

這看起來不錯:)如果我想顯示，我也可以使用CompositeView低於客戶數據的兩個集合（一個用於地址，另一個用於聯繫人），還是應該使用佈局？ – Dennis

@Dennis - 在Layout上使用 –

對於當前版本是3.0，CompsoiteView中的itemView和itemViewContainer應該是childView和childViewContainer。將'item'重命名爲'child'。 http://marionettejs.com/docs/v2.4.7/marionette.compositeview.html#compositeviews-childview –

Marionette.js ItemView - 將子視圖放入區域

回答

相關問題