backbone.jsモデルのビュー切り替え

Question

モデルのビューを切り替える最適な方法は何ですか？

私はモデルのコレクションを持っており、各モデルはビュー、例えばjquery draggable divで表されます。 divをページの特定の領域にドラッグすると、別のビュー表示を使用したいと考えています。

すべきこと： a）モデルごとに異なるビューを設定し、ビューを切り替えますか？各ビューに異なる "el"を使用でき、どの "el"を使用するかを切り替えることはできますか？ b）異なるDOM要素を1つのビューに作成し、それに応じて表示/非表示を切り替えますか？

また、hide（）を使用するのではなく、「隠しビュー」を使用する場合、モデルに関連付けられているすべてのDOM要素を切り離しても、モデルをコレクションに保持するにはどうすればよいですか？また、後でDOM要素を再接続したり再レンダリングしたりしたいと思います。

上記の最後の段落の説明はですが、hide（）を使用すると表示スタイルはnoneに設定されていましたが、多くの隠し要素がある場合は、削除する方が良いかもしれないと考えていますページから削除し、必要に応じて再レンダリングします。 「隠された」と「目に見える」の間で切り替える必要のある要素が100個あるとしましょう。人々は何を考えますか？

Answer 1

バックボーンの美しさは、あなたが望むようにすることができるということです。正しい方法や間違った方法はありませんが、おそらくあなたのアプリケーションに適した方法があります。

私の最初の考えは、同じモデルの2つの別々のビューを持つことですが、今考えてみましょう。ビュー内にトグルブールを簡単に持つことができます。その特定の場合。この方法で、elを変更することで、混乱する必要はありません。

Answer 2

I second @Jeremy。あなたがバックボーンを持っていない場合は、この方法で考えてみましょう、あなただけ何jqueryを行うだろうか？おそらく、ビューの異なるタイプの複数のdivを（例えば）を作成し、それらの間で切り替えるには、jQueryのトグル（...）関数を使用して切り替えます。今あなたはバックボーンを持っています - 違いは何ですか？コードの構造化/クリーンな組織化。あなたのロジックに直接影響するわけではありません。

だから、これは何を言うん：複数のビューを持っていて、モデルを表示するために使用しようとしている（例えば）のdiv要素にバインドします。ビューの異なるレンダリングを処理し、それらの間の切り替えを行うViewHandlerクラスを用意します。 jqueryのトグルを使用するか（トグルが連続している場合）、または独自のトグルを作成します（非常に簡単です）。 ViewHandlerのrender関数は、どのビューを呼び出すか、どのビューを非表示にするかを処理します。ビューオブジェクトは、それが隠されている対応するDOM要素であるにもかかわらず、存在し続けます。

あなたが言った：

をまた、私は「隠されたビュー」を持っていると思った、とだけまだ 隠す（）、どのように私はモデルに関連するすべてのDOM要素を切り離すことができますが、 を使用するのではなく場合モデルをコレクションに保管しますか？ を再度添付したり、DOM要素を後で再レンダリングしたりすることもできます。

DOM要素はどのようにモデルに直接関連付けられていますか？つまり、モデルはデータを保持することだけを意味します。要素からデータを取得できますが、DOMにバインドしないでください。それは、言い換えれば、見解の仕事です。モデルにはデータのみが含まれている必要があります。<p>タグにバインドする場合は、（モデルの）プロパティ 'text'を持って、innerHTMl/textの<p>にバインドしたいと思います。モデルへの変更はすべて、またはサーバーのフェッチなど、そのモデルはデータ所有者だけであり、いつでも好きなときに好きな場所に保存できます。ビューを再アタッチ/デタッチする必要はありません！

対応するDOM要素を非表示にすると、関連付けられたビューが非アクティブになり、添付ファイルや離脱を心配する必要がなくなります。基礎となるデータ（ページデータ）が変更された場合、ビューが表示されたらモデルが更新される可能性があります。DOMにバインドされていても、別のオブジェクトを操作できないように見えませんか？それらはDOMにバインドされていますが、DOMには結び付けられていません。オブジェクトは単に保存/移動できるjavascriptオブジェクト/リファレンスです。 jqueryオブジェクトの参照を実際に格納していない限り、ビューの外でそれらを操作しない限り（悪夢!!）参照を渡すだけでうまくいくはずです！

私はまだモデルのための 'データ'のアプローチだけで、ビューにバインドされていません。

これはあなたの混乱を明確にしますか？

UPDATE：（明確化あたりなど）

あなたは確かに100個の奇数の要素を持っていた、あなたがそれらを表示/非表示にしたいと思い、/削除は彼らがより良い選択肢だろう新しい-INGのかどうかを決定している場合 - 私は推測します私はまだhide/showで行くだろう。 Javascriptでのガベージコレクションは、すべてのオブジェクト参照をnullに設定することで最も効果的です。そして、新しいものをもう一度作ります。間違いを犯したり、複数の参照があるオブジェクトやオブジェクトが絡んでいるメモリリークが発生する可能性があります。ショーですぐにビューを再利用しようとしていることが分かっているなら、私は隠すことを提案します。もしあなたが決してそれを再利用しようとしないなら、ガベージコレクションのためにそれをヌルとして設定することは、IMOに行く方法です。

Answer 3

古いビューを削除する直前に、新しいビューをレンダリングして古いビューの上に挿入することを選択しました。古いビューをキャッシュしてDOMに復元することは可能です（キャッシュを再レンダリングしなければならない）が、キャッシュされたビューはリソースを消費し、アプリケーション内のイベントに応答し続けるため、これは気に入らなかった。

代わりに、コンテナビューをプレースホルダとして作成し、あるビューから別のビューに切り替えるときに、ビューのプレースホルダとしてスクロールすることができます（ガット自身が独自のビューになる可能性があります）。