1

リストにはListViewandItemViewがあります。のコレクションとしてListCollection使用されます。追加の新しいコレクション (たとえば、リスト内のより多くのアイテム) を取得した場合、一般的にイベント後にリストをレンダリングするにはどうすればよいですか?ListViewadd()ListCollectionadd

  1. やるべきですcollection.add(newCollection)か？そして、ループしてモデルごとにnewCollectionモデルを追加し、ヒーブItemViewしてモデルのイベントにバインドしaddてレンダリングしますか?

  2. または、各モデルをループしnewCollectionて新しいモデルを作成し、に追加する必要がありListCollectionますか? 呼び出しを伴う各ループItemView.render()

私がしたくないのは、非効率的すぎる ListView 全体を再レンダリングすることです。

これらの 2 つまたは 3 つ目のオプションで適切なオプションがあれば教えてください。

4

2 に答える 2

2

私はLayoutManagerを使用して理解し、このイベントバインディングを呼び出し元addOneにしましたinitialize

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

addOne関数は基本的にLayoutManagerinsertViewから使用します

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を参照してください。

于 2012-11-03T17:00:58.100 に答える