Question

使用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;
   }
 });

让我们说，而不是这4张专辑，我有10k张专辑，我想把它们全部渲染出来。大多数骨干教程会说你应该遍历集合并逐个附加到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个？

Answer 1

确保您的观点未指定＆＃34; el＆＃34;。允许由骨干创建。然后你的渲染功能可以整天填充视图，而不需要操纵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);

然后有Regions这样可以更容易地将视图填充到DOM中...如果您对Marionette感兴趣，那么开始的好地方就是Addy Osmani＆＃39; s Backbone Fundamentals本书和the chapter on Marionette。

使用骨干集合进行批量写入

1 个答案: