Question

我有一个ListView和ItemView列表。 ListCollection用作ListView的集合。现在，如果我获得额外的新集合（例如列表中的更多项目）和add() ListCollection，我应该如何在{{1}之后进行呈现列表事件？

我应该add吗？然后循环遍历collection.add(newCollection)以按模型添加模型，同时升起newCollection以绑定到模型的ItemView事件中进行渲染？
或者我应该在add中遍历每个模型来创建新模型，然后添加到newCollection？每个循环都有调用ListCollection

我不想做的是重新渲染效率太低的整个ListView。

如果这两者或第三者之间有一个很好的选择，请告诉我。

Answer 1

我想出了使用 LayoutManager 并将此事件绑定从addOne

调用initialize

this.collection.on("add", this.addOne, this);

addOne函数基本上会使用 LayoutManager

中的insertView

this.insertView(new ItemView({model: model})).render();

就这么简单。

Answer 2

处理此问题的最佳方法是让您为模型添加项目视图的过程与循环集合不同。然后，您可以在初始渲染时，循环时以及从“添加”事件中调用相同的函数。


ItemView = Backbone.View.extend({
  // ...
});

ListView = Backbone.View.Extend({

  initialize: function(){
    this.collection.on("add", this.addItemView, this);
  },

  addItemView: function(item){
    var view = new ItemView({
      model: item
    });
    view.render();

    this.$el.append(view.$el);
  },

  render: function(){
    this.collection.each(this.addItemView);
  }

});

FWIW，MarionetteJS为您处理所有这些：



ItemView = Marionette.ItemView.extend({
  template: "#some-template"
});

CollectionView = Marionette.CollectionView.extend({
  itemView: ItemView
});

var cv = new CollectionView({
  collection: someCollection
});

cv.render();

您可以在http://marionettejs.com

找到有关Marionette的更多信息

从Backbone集合添加更新项目视图

2 个答案: