骨干集合

Question

我有一个页面，我必须在其中显示 7 个集合的总数。 如果在集合中创建了任何新项目，那么我的页面应该显示更新的计数。我尝试如下

this.listenTo(XyzCollection, 'update', function() {
  self.lengthVariable = XyzCollection.length;
  self.render();
});

这种方法的问题是，如果任何集合的数量很大（比如 1000），那么渲染方法就会被调用很多次（总共有 7 个集合被调用）。

我也试过了

this.listenTo(XyzCollection, 'update', function() {
    self.lengthVariable = XyzCollection.length;
    //self.render();
});

即只需更新变量，但页面不会刷新，并且在模板上我看到计数为 0（我注释掉了渲染）。

请提出一个合适的方法来实现这个场景

view的初始化和渲染示例如下：

initialize: function() {
    xxx1Collection.refresh();
    xxx2Collection.refresh();
    xxx3Collection.refresh();
    xxx4Collection.refresh();
    xxx5Collection.refresh();
    xxx6Collection.refresh();
    xxx7Collection.refresh();

    var self = this;

    this.listenTo(xxx1Collection, 'update', function() {
        self.var1 = xxx1Collection.length;
        self.render();
    });

    this.listenTo(xxx2Collection, 'update', function() {
        self.var2 = xxx2Collection.length;
        self.render();
    });

    this.listenTo(xxx3Collection, 'update', function() {
        self.var3 = xxx3Collection.length;
        self.render();
    });

    this.listenTo(xxx4Collection, 'update', function() {
        self.var4 = xxx4Collection.length;
        self.render();
    });  

    this.listenTo(xxx5Collection, 'update', function() {
        self.var5 = xxx5Collection.length;
        self.render();
    });

    this.listenTo(xxx6Collection, 'update', function() {
        self.var6 = xxx6Collection.length;
        self.render();
    });

    this.listenTo(xxx7Collection, 'update', function() {
        self.var7 = xxx4Collection.length;
        self.render();
    });
},

render: function() {
    this.$el.html(this.template({
        count1: self.var1,
        count2: self.var2,
        count3: self.var3,
        count4: self.var4,
        count5: self.var5,
        count6: self.var6,
        count7: self.var7,
    }));

}

Answer 1

假设视图中存在 7 个具有递增名称的集合有充分的理由，那么在集合更新时重新呈现的最简单方法如下。

initialize: function() {
    // make collections properties of the view
    this.xxx1Collection.refresh();
    this.xxx2Collection.refresh();
    /* ... */
    this.xxx7Collection.refresh();

    // create the event hash once, and reuse it.
    var events = { update: this.render };

    // there's no need to use `self` when using `this.listenTo`
    this.listenTo(this.xxx1Collection, events)
        .listenTo(this.xxx2Collection, events)
        /* ... */
        .listenTo(this.xxx7Collection, events);
},

render: function() {
    // just pass the length here instead.
    this.$el.html(this.template({
        count1: this.xxx1Collection.length,
        count2: this.xxx2Collection.length,
        /* ... */
        count7: this.xxx7Collection.length,
    }));
}

来自Catalog of Events：

"update" (collection, options) — 在任何事件之后触发的单个事件 已从集合中添加或删除模型的数量。