0

使用backbone.js，假设我有一个收藏——专辑

var albums_collection = new Backbone.Collection([
    {artist:"dell the funky homosapien"},
    {artist:"raffe"},
    {artist:"wilson philips"},
    {artist:"eddie murply"},
    {artist:"jordotech"}
  ]);

以及对应的视图

 AlbumView = Backbone.View.extend({
   render: function(){  
     $(this.el).html(this.model.get('artist') + "<br />");
     return this;
   }
 });

比方说，我有 10k 张专辑，而不仅仅是这 4 张专辑，我想将它们全部渲染。大多数主干教程会说您应该遍历集合并逐个附加到dom。

 album_colleciton.each(addOne);
 addOne:function(model){  
   var view = new AlbumView({model:model});
   $("#albums_container").append(view.render().el):
 }

但是，我注意到像这样一个一个地写入 DOM 实际上可能会降低性能......有没有办法将这些中的每一个保存到一个数组中并同时进行大规模更新？我试过了：

 var arr = [];

 _.each(this.collection.models, function(model){
   var view = new AlbumView({model:model});
   arr.push(view.render().el);
 });

 $("#albumbs_view").html(arr.join(''));

但是上面的结果是一系列“HTMLdivElement”被渲染。知道在这种情况下如何只做一个而不是 1000 个吗？

4

1 回答 1

3

确保您的视图没有指定“el”。允许由主干创建。那么你的渲染函数可以整天填充视图的 el 而不会操纵 DOM。最后，完成后，将其附加到 DOM。


CollectionView = Backbone.View.extend({

  render: function(){
    var that = this;

    this.collection.each(function(m){
      var v = new SomeView({model: m});
      v.render();
      that.$el.append(v.$el);
    });

  }
});

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

$("#whatever").html(cv.$el);

顺便说一句，我的Backbone.Marionette框架将使您更容易做到这一点：


SomeView = Marionette.ItemView.extend({
  // ...
});

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

atv = new AllTheViews({collection: someCollection});
atv.render();

$("#whatever").html(atv.$el);

还有一些区域可以更轻松地将视图填充到 DOM 中……如果您对 Marionette 感兴趣，那么可以从 Addy Osmani 的Backbone Fundamentals书和有关 Marionette 的章节开始。

于 2012-09-29T02:59:07.837 回答