Question

我有以下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>

布局

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没有方法'show'。”

我是否必须等到视图加载？

Answer 1

我觉得你有点困惑。 ItemView对regions属性没有任何作用（您可能会考虑Application类），所以当您尝试调用this.regions.addresses.show时，与调用相同".addresses".show。

我认为您可能希望在这种情况下使用CompositeView，因为它结合了ItemView（您可以将其用于客户数据）和CollectionView，您可以将其用于你的地址清单。您还需要为地址定义单独的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()
});

我也认为你不需要专门绑定变化＆amp;渲染事件就像在你的例子中一样，marionette通常会照顾它（与你的serializeData的实现相同，看起来它与默认实现的模糊相同）

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

1 个答案: