web-dev-qa-db-ja.com

バックボーン：コレクションが変更されたときにコレクションビューを更新するにはどうすればよいですか？

私はBackbone.jsに比較的慣れていません。コレクションビューを初期化し、作成時にコレクションを渡します。

suggestionsView = new TreeCategoriesAutoSuggest.Views.Suggestions({
    collection: new App.Collections.Suggestions(this.getSuggestions(query))
});

次に、コレクションビューをレンダリングします。ユーザーがテキストボックスにクエリを入力するたびに、コレクションが再生成され、以下を使用してコレクションビューに割り当てられます。

suggestionsView.collection.set(this.getSuggestions(query));

これにより、コレクション内のモデルの追加/削除が処理されますが、追加/削除されたモデルのビューの追加/削除を管理するにはどうすればよいですか？

コレクションビューでthis.collection.on（ "add"）リスナーを使用したことを述べておく必要があります。ただし、これは追加されたすべてのモデルに対してトリガーされます。また、個々のビュー内からthis.model.on（ "change"）を試しましたが、モデルがコレクションに追加/削除されても、これは発生しません。

どんな助け/ガイダンスもありがたいです！

更新

私は現在使用しています：

suggestionsView.collection.reset(this.getSuggestions(query));

そして、リセットイベントが発生すると、提案サブビューを削除し、新しいコレクション用にそれらを再初期化し、コレクションビューを再レンダリングします。

handleReset: function(){
    console.log("reset");
    this.cleanupOldViews();
    this.initViews();
},

initViews: function(){
    this.collection.each(function(suggestion){
        this.suggestionViews.Push(new TreeCategoriesAutoSuggest.Views.Suggestion({
            model: suggestion
        }));
    },this);        
},

cleanupOldViews: function(){
    _.each(this.suggestionViews,function(suggestionView){
        suggestionView.remove()
    },this);

    this.suggestionViews = [];
}

だから、モデルを破壊することを心配する必要はないと思いますか？

javascriptbackbone.jsbackbone-eventsbackbone.js-collections
9
Alex B

reset ：を使用すると、一括置換がより簡単かつ効率的になります。

リセットcollection.reset([models], [options])

モデルを一度に1つずつ追加および削除することはすべてうまくいきますが、変更するモデルが多すぎて、コレクションをまとめて更新したい場合があります。 resetを使用して、コレクションをモデルの新しいリスト（または属性ハッシュ）に置き換え、最後に単一の"reset"イベントをトリガーします。新しく設定されたモデルを返します。便宜上、"reset"イベント内で、以前のモデルのリストはoptions.previousModelsとして利用できます。

したがって、 set を使用して変更をマージし、'add'イベントと'remove'イベントの束を生成する代わりに、resetを使用して'reset'イベントをリッスンします。

// In the view's `initialize`...
this.listenTo(this.collection, 'reset', this.render);

そして、renderはすべてを再描画でき、次のようになります。

suggestionsView.collection.reset(this.getSuggestions(query))
// ------------------------^^

物事をリフレッシュする。

コメントからのいくつかの説明：モデルは'add'イベントを生成せず、コレクションのみがそれらをトリガーします。モデルは、プロパティが変更されたときに'change'イベントをトリガーし、コレクションは、モデルがモデルに追加およびモデルから（それぞれ）削除されたときに'add'および'remove'イベントをトリガーします。コレクションは'change'イベントをトリガーすることもできます。これは、コレクションが 囲まれたモデルからすべてのイベントを転送する ：

コレクション内のモデルでトリガーされるイベントは、便宜上、コレクションでも直接トリガーされます。

したがって、Collection#setを使用する場合は、ビューに3つのハンドラーが必要です。

  1. this.listenTo(this.collection, 'add', ...)：新しいモデルがコレクションに追加されたので、レンダリングします。
  2. this.listenTo(this.collection, 'remove', ...)：モデルがコレクションから削除されたため、ビューのその部分を削除します。
  3. this.listenTo(this.collection, 'change', ...)：モデルが変更されたため、ビューの一部を更新します。

小さなコレクションのみを使用している場合は、resetの作業が少なくなる可能性があります。コレクションが大きい場合、またはビューの変更に費用がかかる場合は、3つのイベントを個別に処理するのが最適な場合があります。

いずれにせよ、サブビューを使用している場合は、親ビューのどこかにサブビューのリストを保持して、サブビューで remove を呼び出して作成できるようにする必要があります。物事が適切にクリーンアップされていることを確認してください。コレクションからモデルを削除するときにモデルを破棄する場合は、サブビューをモデルの'destroy'イベントにバインドし、必要に応じてモデルを削除することができます。

イベントのカタログ は、どのイベントがいつトリガーされるかを確認する価値があるかもしれません。

15
mu is too short