Backbone.js UI中管理UI狀態/處理選擇的方法

Question

我的問題涉及此UI示例。

經與方法來管理各種UI視圖分量的「選中」狀態的麻煩。例如，我有上面的菜單，用戶從中進行各種選擇。這些選擇應該會引起菜單本身的更新（HL選定的項目），並且會導致結果更新，這將根據所作的選擇進行更新。另外，菜單有不同的規則。例如，您一次只能選擇一個「列表」，但您可以選擇多個「標籤」。

的一種方法，我在想是要創建包含UI「選擇」的狀態的主幹模型。例如，我可以有一個模型SearchCriteria來保存這些信息。然後，當用戶在UI中做出選擇時，我可以更新此模型。我可以讓各種視圖組件監聽此模型中的更改（以及主數據模型中的更改）。然後，視圖將通過更新哪些項目顯示爲選中來更新其視覺狀態。

一個項目，我用這種方法掙扎是誰應該負責更新項目的選定狀態。例如，標籤的名單上，我可能有以下幾部分定義...

• 標籤（模型來表示一個標籤）
• TagCollection（集合代表標籤的集合）
• TagMenuView （觀點代表了可供選擇的標籤菜單）
• TagMenuItemView（視圖，它表示菜單中的單個項目）

我應該......

• 設置在TagMenuItemView用於點擊事件偵聽器，然後嘗試處理1）更新所述SearchCriteria模型，和2）更新菜單，例如視覺狀態選擇的項目？
• 或者，我應該有更高層次的視圖（TagMenuView）監聽事件，如用戶選擇一個標籤，並執行那裏工作？
• 此外，本示例中的標籤菜單允許選擇多個項目，但列表菜單一次僅允許選擇一個列表。這個「用戶界面」規則（或者這是否與搜索有關的業務規則？）會在哪裏執行？例如，如果我在每個單獨的列表菜單項上監聽點擊事件，我當然可以更新該項目的視覺狀態，但是，我還需要確保更高級菜單視圖取消選擇其他所選列表。那麼，管理視圖中待辦事項列表菜單（代表整個菜單（ToDoListMenuView）而不是每個單獨的菜單項視圖）中的「UI」狀態會更好嗎？

對不起，這麼多的問題。我只是很難轉向這種發展模式。

Answer 1

你幾乎類似於一個我會用一個答案。

如果你認識到list，search，due和tags是搜索過濾器上的待辦事項大集合，你的啓蒙方式90％。實際上，除了search之外，所有這些都只是「各種標籤」！ （除非您有10,000件待辦事項，否則沒有任何性能或與內存相關的理由來列出待辦事項清單;「工作」，「項目＃1」和「個人」僅僅是您專用的標籤從您的視圖中過濾項目，僅顯示與您生活中的某個領域相關的項目。）

創建SearchCriteria模型。 （您不是在技術上搜索，而是在過濾：您從視圖中排除那些與您的搜索條件不匹配的內容）。此模型將包含有關您的客戶端狀態的很多屬性。您的搜索條件幾乎完全由客戶端中的數據驅動（因爲搜索一次只適用於一個ToDoList），所以它完全是SearchCriteria相關的，而不是ToDo對象相關的。

所有視圖綁定到更改/添加/刪除SearchCriteria上的事件。當用戶點擊任何視圖（列表，視圖，標籤）時，該消息將被轉發給SearchCriteria。它會進行適當的內部更改，從而觸發視圖重新呈現自己。主要的ToDoListView中的一個事件接收者，它在呈現過程中檢查搜索條件。喜歡的東西：

ToDoListView = Backbone.View.extend({ 
... 
render: function() { 
    var self = this, 
    toDraw = this.collection.filter(
     function(c) { return this.searchCriteria.passes(c); }); 
    $(this.el).html(''); 
    _.each(toDraw, function(c) { 
     (new ToDoItemView({model: c, parent: self})).render(); }); 
} 

這可能是一個小的個人習慣，傳遞父對象，並讓該項目將自身插入到父的DOM對象。您可以傳入任何內容：要附加到的元素。或者，渲染可以返回一個DOM對象，ListView可以進行追加。這是一個品味問題。我已經完成了兩個。

你不得不在骨幹的父庫中挖一點，下劃線，以挖掘​​使用的基本精彩。

另外，我經常在一個自動執行的匿名函數中包含一個完整的Backbone應用程序，並且將「searchCriteria」作爲變量可以在SEAF範圍內訪問所有對象，所以它不會是this.searchCriteria，但只是searchCriteria。

您也可以編寫SearchCriteria，以便它調用sync，將事件狀態寫入服務器，然後將其保存爲原始JSON對象;同步的好處在於，如果您發送的內容和接收的內容相同，則不會觸發事件，因此您不會獲得雙重渲染效果，使用JSON的好處在於它適合客戶端，但不包含服務器的待辦事宜關係。

此外，您可以指定特定的客戶端行爲規則。例如：當您更改待辦事項清單時，您可以應用文本搜索條件，或者作爲替代方案，您可以決定更改清單將清除文本搜索條件字段;這樣做會觸發一個會導致「TextSearchView」清除其輸入框的事件（您將不得不編寫該事件處理程序，但它會是顯然您打算這麼做）。您可以制定任何您喜歡的規則，例如「更改列表清除所有選項」，但這似乎不明智。我可以很容易想象在我的個人生活中，試圖解決我的「項目」列表中的錯誤和。但如果你明白我的意思，清理搜索框似乎更加合理。