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

我正在学习Marionette.js，并有一个方案，其中我的应用程序具有：

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

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

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

我有一个项目视图和项目视图：

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进行操作。一切正常。

但是现在我想添加一个区域（计数器区域），以显示我的收藏夹中的项目总数。理想情况下，我需要将其作为单独的视图，因为我将在不同的地方显示它。

所以我这样做：

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

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

Uncaught TypeError：无法读取未定义的属性“ length”。

请帮忙... ：（

------------------------- E D I T ----------------------

我已经做到了，但是做这么小的事情似乎太复杂了。

这样更改了我的收藏集：

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

我不敢相信没有比这更简单的方法了..：/

最佳答案

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

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

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

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

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

关于javascript - 在Marionette.js的 View 中显示集合长度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32098092/