Question

我有一个从集合渲染自己的视图：

render: function() {

    $(this.el).html(JST['templates/menu']({collection: this.collection }));
    $('#nav').html(this.el);     
}

在视图初始化程序中，我在视图的渲染函数上绑定集合的add事件：

initialize: function() {
    this.render();
    var self = this;
    this.collection.bind("add", function(event){
        self.render();
    });
}

在应用程序的其他地方，我将一个项目添加到集合中。

bookSubscription_collection.add(model);

该代码的问题是，如果我向集合添加新项目，则会重新呈现集合中的所有项目。

有没有办法在不重新渲染所有其他项目的情况下将新项目添加到集合中，只是渲染新项目？

Answer 1

这是我如何做的简化版本。 reset将所有模型添加到用户界面，add将单个模型添加到用户界面。 addAll基本上有一个循环，为每个模型调用addOne。它可能会更好地进行优化，但效果还不错。

initialize: function() {
    _.bindAll(this, 'render', 'addOne', 'addAll');

    leads.bind('add', this.addOne, this);
    leads.bind('reset', this.addAll, this);
  },
  render: function() {
    this.addAll();
    return this;
  },
  addOne: function(model) {
    // add the model to HTML
  },
  addAll: function(options) {
    leads.each(this.addOne);
    return this;
  }

Answer 2

不是将集合的add事件绑定到render函数，而是将其绑定到接受已添加模型的其他函数，并使用添加的模型中的数据修改DOM。

Answer 3

亚伯拉罕写了一个很好的例子。我也一直在使用它

initialize: ->    
  self = @
  @model.bind "add", (task) ->
    $(self.el).append new app.TaskIndexItemView(model: task).render().el

但我认为addOn是更好的解决方案

backbone.js：在不重新渲染所有集合的情况下向集合添加元素

3 个答案: