16

jqueryとbackbone.jsのWebアプリを開発しています。
1つのコンポーネントにはhtmlテーブルがあり、このテーブルの背後にはbackbone.jsコレクションがあります。
このコレクションを変更すると、htmlテーブルが更新されるはずなので、次のように記述します。 

this.collection.bind("reset add remove", this.renderRows, this);

そのため、コレクション全体が新しくなったとき、新しいモデルが追加されたとき、モデルが削除されたときに、htmlテーブルを更新します。

ユーザーがhtmlテーブルの特定の行にカーソルを合わせてクリックしたときに呼び出される詳細ビューコンポーネントもあります。このコンポーネントの最初に、コレクションから適切なモデルを取得します

changeModel = this.collection.get(id);

ユーザーがいくつかの属性を変更した後、私は

changeModel.set(attrs);

htmlテーブルに戻ります。コレクション内のモデルには、正しい変更された値があります。

ただし、3つのイベント（リセット、追加、削除）のいずれもトリガーされなかったため、htmlテーブルは更新されません。

そこで、コレクションバインディングに「replace」を追加しました

this.collection.bind("replace reset add remove", this.renderRows, this);

詳細ビューから戻る前に、

this.collection.trigger("replace");

私の解決策は機能しますが、私の質問は次のとおりです。

すでに存在し、見逃していて、自分で何かをトリガーする必要がない「ネイティブ」backbone.jsソリューションはありますか？

4

1 に答える 1

47

モデルからのchangeイベントがコレクションにバブルアップします。（注釈付きソースのコレクションの_onModelEvent関数。このメソッドは、基本的にモデルからすべてのイベントを取得し、コレクションでそれらをトリガーします。

これはにつながります

  1. モデル属性が設定されている
  2. モデルトリガーchange
  3. コレクションのキャッチchange
  4. 収集トリガーchange

それで

this.collection.bind("replace reset add remove", this.renderRows, this);

これに置き換える必要があります

this.collection.bind("change reset add remove", this.renderRows, this);

PS

私の個人的な意見では、1つのモデルだけを変更した場合、テーブル全体を再描画するべきではありません。代わりに、各テーブル行を、対応するモデルをモデルとして持つビュー自体にし、そこで属性の変更に反応します。1つだけをターゲットにしている場合、500個のテーブルセルを再描画しても意味がありません。

アップデート

そして最近では、onイベントにバインドするために-methodを使用する必要があります。

collection.on("change reset add remove", this.renderRows, this);

BB 1.0を使用していて、このイベントが内でリッスンされているView場合は、newlistenToを使用してイベントにバインドすることをお勧めします。これにより、を呼び出すときにバインドを簡単に解除することもできますview.remove()。その場合は、次のことを行う必要があります。

// assuming this is the view
this.listenTo(collection, "change reset add remove", this.renderRows);
于 2012-09-05T10:31:56.980 に答える