2011-08-06 78 views
3

切換模型視圖的最佳方法是什麼?模型的backbone.js切換視圖

我有一個模型的集合,並且每個模型都由一個視圖來表示,例如一個jQuery可拖動的div。當div被拖動到頁面的某個區域時,我想使用不同的視圖表示。

應該我: a)爲每個模型設置不同視圖並切換視圖?我可以爲每個視圖使用不同的「el」,並切換使用哪個「el」? b)將不同的DOM元素構建到單個視圖中並相應地顯示/隱藏?另外,如果我想要一個「隱藏視圖」,而不是僅僅使用hide(),我怎樣才能分離與模型相關的所有DOM元素,但仍然保持模型在集合中?我還想稍後重新附加或重新呈現DOM元素。

澄清:上面最後一段,我的意思是,如果我使用隱藏(),它只是設置可見樣式首屈一指,但如果我有很多隱藏要素,我想這可能是更好的刪除從頁面中重新渲染它們。假設我有100個需要在「隱藏」和「可見」之間切換的元素。人們認爲什麼?

回答

1

Backbone的美妙之處在於,您可以隨心所欲地做到這一點。沒有正確或錯誤的方式,但可能有更適合您應用程序的方式。

我最初的想法是對同一個模型有兩個單獨的視圖,但現在我想到了,您可以在視圖中輕鬆地使用切換布爾值,以便渲染函數知道要渲染哪個視圖那個特定的情況。這樣您就不必亂用el

1

我第二@Jeremy。讓我們這樣想,如果你沒有骨幹,但只有jquery你會怎麼做?可能會爲不同類型的視圖創建多個div(例如),並使用jQuery的toggle(...)函數在它們之間切換。現在你有骨幹 - 有什麼不同?代碼的結構/清潔組織。它不會直接影響你的邏輯,只會更好地組織它。

那麼這就是說:有多個視圖並將它們綁定到您將用於查看模型的div(例如)。有一個ViewHandler類來處理視圖的不同渲染,並在它們之間切換。要麼使用jQuery的切換(如果切換是連續的)或創建自己的(非常簡單)。讓ViewHandler的渲染函數處理要調用哪個視圖以及要隱藏哪個視圖。雖然只有隱藏的相應DOM元素,但視圖對象仍然存在。

你說:

另外,如果我想有一個「隱藏視圖」,而非只是使用 隱藏(),我怎麼可以分離相關的模型,但 仍然是所有的DOM元素保持模型在集合中?我還想重新附加 或稍後重新渲染DOM元素

DOM元素如何直接與模型相關?我的意思是這個模型只是爲了保存數據。您可以從元素獲取數據,但不應將它們綁定到DOM。可以這麼說,這就是視圖的工作。模型應該只包含數據 - 如果你綁定到一個<p>標籤,我寧願你有屬性「文本」(模型),並綁定到<p>的innerHTMl /文本 - 所有對模型的改變應該通過視圖發生或服務器的提取等。這樣,模型只是一個數據的持有者,你可以隨時隨地保存它們,你喜歡多久!無需重新附加/分離視圖!

一旦你隱藏了相應的DOM元素,它會使關聯的視圖處於不活動狀態,因此你不必擔心附件/分離。如果底層數據(即頁面數據)發生變化,那麼您的模型可以在視圖可見時自行更新:)我不明白,即使將它們綁定到DOM也不能阻止您操作不同的對象?它們是綁定的,但不綁定到DOM,對象只是可以存儲/移動的javascript對象/引用。除非你實際上存儲jquery對象引用,除非你在視圖之外大幅操縱它們(噩夢!!),否則你應該很好地傳遞參考!

我仍然只用模型的「數據」方法,但沒有綁定到視圖。

這是否澄清你的困惑?

UPDATE:(按說明)

如果你確實有100餘元,你想隱藏/顯示他們,並決定是否刪除/新-ING他們會是一個更好的選擇 - 我猜我仍然帶着隱藏/表演。通過將所有對象引用設置爲null可以很好地實現JavaScript中的垃圾收集。然後你再次創建新的。有可能犯一個錯誤,並有內存泄漏或懸掛對象或具有多個引用的對象。如果你知道你要在節目中儘快重新使用視圖,我會建議隱藏。如果您永遠不會重複使用它,將它設置爲空垃圾收集是一種方式,IMO。

+0

謝謝@Nupul我更新了問題,並澄清了有關隱藏的部分。我同意保持模型嚴格的數據,所以我的意思是從視圖中分離DOM元素。 – fortuneRice

+0

@fortuneRice:查看更新 – PhD

0

我選擇渲染一個新的視圖並在刪除舊的視圖之前將其插入到舊視圖上方。可以緩存舊視圖並將其恢復到DOM(而不必重新渲染它),但我不喜歡這樣做,因爲緩存視圖消耗資源並繼續響應應用程序中的事件。

或者,您可以創建一個容器視圖作爲視圖的佔位符,並在您從一個視圖切換到另一個視圖時交換它的膽量(膽量本身可能是它自己的視圖)。