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

たとえば、これら 4 枚のアルバムだけでなく、10,000 枚のアルバムがあり、それらすべてをレンダリングしたいとします。ほとんどのバックボーン チュートリアルでは、コレクションをループして 1 つずつ dom に追加する必要があると述べています。

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

ただし、このように DOM に 1 つずつ書き込むと、実際にはパフォーマンスが低下する可能性があることに気付きました...これらのそれぞれをおそらく配列に保存して、一度に一括更新する方法はありますか? 私はもう試した：

 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 ではなく 1 つだけにする方法はありますか?

4

1 に答える 1

3

ビューで「el」が指定されていないことを確認してください。バックボーンで作成できるようにします。その後、レンダー関数は、DOM を操作することなく、ビューの el を 1 日中設定できます。最後に、完了したら、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 に答える