2012-02-20 15 views
3

私は2つのビューを持つbackbonejsアプリケーションを持っています。それは一種の次のようになります。Backbonejs:ビューが削除されたときにコレクションバインディングをアンバインドするにはどうすればいいですか?

<body> 
    <header></header> 
    <div id="content"></div> 
</body> 

ビューアプリをロードされるたびに完全に#contentの内容を上書きすることで、現在のビューを上書きします。

// Like this... 
$('#content').html(new primaryView().render()); 
// ...and this. 
$('#content').html(new secondaryView().render()); 

アプリケーションにはグローバルコレクションがあります。

App.Collection(); 

セカンダリビューは、グローバルコレクションに応じて変更されます。そのため、関数はビューの初期化関数でApp.Collectionの 'add'イベントにバインドされます。

App.Collection.bind('add', function(){ 
    console.log('Item added'); 
}); 

私の問題が発生します。セカンダリビューが読み込まれるたびに、新しい関数がApp.Collectionのaddイベントにバインドされます。プライマリビューからセカンダリビューに3回移動すると、アイテムがApp.Collectionに追加されるたびに3回呼び出されます。

私は間違っていますか? ビューに初期化されていない関数があった場合、どうすればいいのか分かります。 ビューがロードされた後にビューを削除しなかった場合、どうすればそれを実行できるかがわかります。 Jqueryのような名前空間のイベントができたらどうすればいいのか分かります。 (バインドする前にバインド解除することによって)。

+1

Derick Baileyの記事が見つかりました。まともな解決策のように聞こえる。 http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/ – janjarfalk

答えて

2

問題をかなり一般化することができます。基本的には、イベント駆動型のアプリケーションを作成しています。そのようなアプリイベントでは、世話をする必要があります。

this postをチェックすると、バックボーンでイベントハンドラを使用する推奨される方法を確認できます。

0

状況に応じて、initializeおよびrenderメソッドを使用して、ビューの作成のさまざまな側面を処理できます。たとえば、あなたはあなたのビューが作成されるだけ火災initialize

initialize: function() { 
    App.Collection.bind('add', function(){ 
    this.view.render() 
    }); 
} 

の内側に結合置くことができます。これにより、renderメソッドがaddイベントにバインドされます。次に、renderメソッドでは、実際にhtmlを作成することができます。

これにより、再レンダリングが必要になるたびにバインドが行われなくなります。

+0

あなたの答え@マコンデスに感謝しますが、私はDerick Baileysのソリューションを使いました。私は自分の意見を完全に消して、不必要な記憶を取らないようにしたい。 – janjarfalk

関連する問題