8

我有以下ItemView模板，其中填充了客户数据（名字、姓氏），我想将 a 添加CollectionView到 div.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>

布局

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

我收到错误“Uncaught TypeError: Object .addresses has no method 'show'”。

我必须等到视图加载吗？

4

1 回答 1

10

我认为你的事情有点混乱。AnItemView不会对regions属性做任何事情（您可能正在考虑Application类），因此当您尝试调用时this.regions.addresses.show，它与调用".addresses".show.

我认为您可能希望CompositeView在这种情况下使用 a，因为它结合了一个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-18T21:51:03.370 回答