Javascript js ItemView-将子视图放在区域中

我有以下

ItemView

模板，其中填充了客户数据（firstName、lastName），我想在div

中添加一个
CollectionView
。addresses

模板

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

我收到错误“UncaughtTypeError:Object.addresses没有方法'show'

---

我必须等到视图加载后再看吗？

我想你有点糊涂了。

ItemView

与

regions

属性没有任何关系（您可能会想到

应用程序

类），因此当您尝试调用

this.regions.addresses.show时，这与调用
“.addresses.show”相同

我认为在这种情况下，您可能需要使用
组合视图
，因为它结合了
项目视图
（您可以用于客户数据）和
收集视图
，您可以用于您的地址列表。您还需要为地址定义一个单独的
ItemView
（作为
CollectionView
仅为集合中的每个项目创建一个
ItemView
）

有点像这样（我没有测试过，所以可能不完全正确）：

我也不认为您需要像您的示例中那样专门绑定更改和呈现事件，因为木偶网通常会处理这一点（serializeData的实现也是如此，看起来它与默认实现大致相同）
这看起来不错：）如果我想在客户数据下面显示两个集合（一个用于地址，一个用于联系人），我是否也可以使用CompositeView？或者我应该使用布局吗？@Dennis-在布局中使用当前版本3.0的CompsoiteView中的itemView和itemViewContainer，应该是childView和childViewContainer。将“项”重命名为“子项”。
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));
    }
});

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