Question

我计划创建一个Backbone.js视图来呈现项目列表。该名单将会增长。在我看来，出于性能原因，我不应该使用项目清空和重建DOM。这有意义吗？你会怎么做到这一点？

Answer 1

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

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

sync = [首次提取时呈现整个列表]
add = this。$ append（...）
删除= [查找相应的列表视图项] .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);
      }
    }
  }
});

Backbone.js查看部分呈现列表？

1 个答案: