Backbone.js 视图部分呈现列表？答案

【问题标题】：Backbone.js View to render a list partially?Backbone.js 视图部分呈现列表？
【发布时间】：2014-03-24 18:57:49
【问题描述】：

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

【问题讨论】：

您是否对每个列表项使用一个视图？还是只有一个视图的集合？您的列表是在变化还是在增长？如果它只是在增长，您可以只附加项目而不是重新渲染整个列表。

标签： backbone.js backbone-views

【解决方案1】：

我对这种事情的典型设置是为ul 或我拥有的任何包含元素定义一个Backbone.View，并将其绑定到一个集合。然后定义另一个 Backbone.View 来呈现单个列表项。此视图的实例与集合中的模型具有一对一的关系。

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

sync = [在第一次提取时呈现整个列表]
add = this.$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);
      }
    }
  }
});

【讨论】：