Backbone.js视图是否部分呈现列表？

我计划创建一个Backbone.js视图，用于呈现项目列表。这个名单将会增加。在我看来，出于性能原因，我不应该清空并用这些项重建DOM。这有意义吗？您将如何实现这一点？

我对这类事情的典型设置是使用定义主干。视图来定义

ul

或任何包含我的元素，并将其绑定到集合。然后定义另一个主干。视图以呈现单个列表项。此视图的实例与集合中的模型具有一对一的关系

集合具有不同的事件，这些事件与您需要执行以反映它们的不同类型的DOM操作很好地对应。我将它们绘制成这样：

• sync=[在第一次获取时呈现整个列表]
• add=此。$append（…）
• remove=[查找对应的列表视图项].remove（）

好的，这段代码只是从内存中敲打出来的，没有经过测试，但是您得到了以下想法：

var collection = new Backbone.Collection({
  model: Backbone.Model,
  url: '/some/api/endpoint'
});

var Li = Backbone.View.extend({
  tagName: 'li',
  initialize: function(){
    this.render();
  },
  render: function(){
    var template = _.template($('li-template').html());
    this.el = template(model.toJSON());
  }
});

var Ul = Backbone.View.extend({
  collection:collection,
  el: 'ul',
  initialize: function(){
    this.listItems = [];
    this.collection.on('sync', this.addAll);
    this.collection.on('add', this.addOne);
    this.collection.on('remove', this.removeOne);
  },

  addAll: function(){
    var frag = document.createDocumentFragment();
    this.collection.forEach(function(model){
      var view = new Li({model: model});
      frag.appendChild(view.el);
      this.listItems.push(view);
    });
    this.el.appendChild(frag);
  },

  addOne: function(model){
    var view = new Li({model: model});
    this.el.appendChild(view.el);
    this.listItems.push(view);
  },

  removeOne: function(model){
    for (var i = 0, num = this.listItems.length, item; i < num; i++) {
      view = this.listItems[i];
      if (view.model.cid === model.cid) {
        this.el.removeChild(view.el);
        this.listItems.splice(i, 1);
      }
    }
  }
});

var collection=新主干。集合({
型号：主干，型号，
url:“/some/api/endpoint”
});
var Li=Backbone.View.extend({
标记名：“li”，
初始化：函数（）{
这个。render（）；
},
render:function（）{
var-template=551;.template（$（'li-template'）.html（））；
this.el=模板（model.toJSON（））；
}
});
var Ul=Backbone.View.extend({
收藏：收藏，
el:‘ul’，
初始化：函数（）{
this.listItems=[]；
this.collection.on（'sync'，this.addAll）；
this.collection.on（'add'，this.addOne）；
this.collection.on（'remove'，this.removeOne）；
},
addAll:function（）{
var frag=document.createDocumentFragment（）；
this.collection.forEach（函数（模型）{
var view=newli（{model:model}）；
框架附件（视图el）；
此.listItems.push（视图）；
});
这是我的孩子（frag）；
},
addOne：功能（模型）{
var view=newli（{model:model}）；
this.el.appendChild（view.el）；
此.listItems.push（视图）；
},
removeOne：功能（型号）{
for（var i=0，num=this.listItems.length，item；i

是否为每个列表项使用一个视图？还是只有一个集合视图？你的名单在变化还是在增长？如果它只是在增长，您可以只追加项目，而不是重新呈现整个列表。