javascript - 在 Marionette.js 的 View 中显示集合长度

Question

我正在学习 Marionette.js 并有一个场景，我的应用程序具有:

app.addRegions({
    main: '#omen',
    newItem: '#addnewitem',
    counter: '#counter'
});

这些地区。我有这些模型/集合:

var Item = Backbone.Model.extend(),
Items = Backbone.Collection.extend({
    model: Item,
    url: 'api/items'
}),

我有一个项目 View 和项目 View :

ItemView = Mn.ItemView.extend({
    tagName: 'tr',
    template: '#itemView',
    events: {
        'click #btnDeleteBook' : 'deleteItem'
    },
    deleteItem: function() {
        app.trigger('item:delete', this.model);
    }
}),
ItemsView = Mn.CollectionView.extend({
    tagName: 'table',
    childView: ItemView,
    onShow: function(view) {
        TweenMax.staggerFrom($(view).find('td'), 1, {
            x: 100
        }, 2);
    }
}),

我有一个初始化函数，它监听上面的事件并通过 app.ItemController 执行操作。一切正常。

但现在我想添加一个区域(计数器区域)，它显示我的集合中的项目总数。理想情况下，我需要将其作为一个单独的 View ，因为我将在不同的地方显示它。

所以我这样做:

DisplayCounter = Mn.ItemView.extend({
    template: _.template('Total: '+ app.Items.length),
}),

app.Items 是上面声明的 Collection 的实例。但即使在实例化 DisplayCounter 之前，我也会收到错误:

未捕获类型错误:无法读取未定义的属性“长度”。

请帮忙...:(

------------------------- 编辑 --------------------- -

我已经实现了，但是做这么一件小事似乎太复杂了。

像这样改变我的收藏:

Items = Backbone.Collection.extend({
        model: Item,
        url: 'api/items',
        initialize: function() {
            this.listenTo(this, 'add', function() {
                app.trigger('collection:updated', this);
            });
        }
    }),

并像这样更改了我的 DisplayCounter:

DisplayCounter = Mn.ItemView.extend({
        template: _.template('Total: <%=length%>'),
        templateHelpers: function() {
            return {
                length: this.lengthVariable || 0
            }
        },
        initialize: function() {
            app.on('collection:updated', function(params){
                this.lengthVariable = params.length;
                this.render();
            }.bind(this));
        }
    }),

我不敢相信没有更简单的方法来做到这一点..:/

Answer 1

设置 DisplayCounter 的代码在将 Items 实例放入 app.Items 的代码之前运行。

即使您通过先分配 app.Items 来避免此问题，您仍然会遇到问题 - template 属性仅设置一次，因此您只需设置在定义 DisplayCounter 时查看 app.Items 的长度。

您应该在渲染时提供一个值，而不是将值直接硬编码到模板字符串中。 Mn.View.serializeData 允许您自定义在渲染时传递到模板函数的数据:

DisplayCounter = Mn.ItemView.extend({
  template: _.template('Total:: <%= itemCount %>),

  serializeData: function() {
    return { itemCount: app.Items.length }
  }
}),