1

我有一个ListView列表ItemView。ListCollection用作的集合。ListView现在，如果我得到额外的新集合（例如列表中的更多项目）并add()进入ListCollection，我应该如何在事件发生后总体上呈现列表add？

  1. 我应该这样做collection.add(newCollection)吗？然后循环通过newCollection模型添加模型，同时ItemView绑定到模型的add事件进行渲染？

  2. 或者我应该遍历每个模型newCollection以创建新模型，然后添加到ListCollection？每个循环都有调用ItemView.render()

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

让我知道这两个或第三个之间是否有一个好的选择。

4

2 回答 2

2

我想出了使用LayoutManager并将这个事件绑定addOne从initialize

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

该addOne功能将基本上insertView从LayoutManager使用

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

就这么简单。

于 2012-11-05T05:03:11.237 回答
1

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


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 的更多信息

于 2012-11-03T17:00:58.100 回答