如何使用骨幹處理單頁面應用程序的UI狀態

Question

因爲我來自傳統的Web開發背景，使用ASP.Net，甚至服務器端MVC，所以忍受着我。我正在嘗試使用Backbone.js構建一個高度交互式的單頁面應用程序，以幫助組織我的JavaScript代碼並構建UI。

我遇到了一些概念問題，或者構建我的UI組件的方法，並決定如何處理某些方面。我將使用這個過於簡單的屏幕截圖作爲我的問題和討論的基礎。

讓我們用一個 「TO-DO」 應用爲例（當然）的用戶界面非常簡單。我有以下的「部件」 ......

• 結果列表，顯示當前設置的待辦事項匹配當前選擇標準
• 的列表，我的任務列表（個人，工作，博客項目）
• 截止日期過濾器（今天，明天，本週，下週）
• 的標籤（錯誤，功能，理念的名單，跟蹤）的列表
• 搜索框

所需的功能

• 更新的結果，只要任何的搜索條件的變化（選擇列表中，選擇一個適當的數據，選擇一個或多個標籤，輸入搜索文本等）
• 用戶可以編輯，添加和刪除列表。 （在這個模擬中沒有真正顯示）
• 用戶可以編輯，添加和刪除標籤。 （在這個模擬中沒有真正顯示）
• 用戶可以編輯，添加和刪除待辦事項。 （不是真的在此模擬了出）

數據模型

有多種型號，我確定的是「數據」相關。這些很容易識別。

• 待辦事項（代表一個待辦事項）
• ToDoCollection（代表待辦事項的集合）
• TodoList的（代表一個待辦事項列表）
• ToDoListCollection（代表待辦事項列表的集合）
• 標籤（代表一個標籤）
• TagCollection（代表標籤的集合）

如何存儲UI狀態？

這是我遇到麻煩的地方。我想要顯示當前選中我的菜單中的哪些項目（左側）。我可以肯定地聽取事件，並在選中項目時添加一個「選定」類，但我也有規則，例如「一次只能選擇一個列表」，但可以選擇「任意數量的標記」一次。另外，由於「待辦事項列表」菜單和標籤菜單是動態的，因此它們已經與ToDoListCollection和TagCollection模型相關聯。它們根據這些「數據模型」的狀態呈現。

那麼，我如何處理這個UI狀態管理所有這些不同的視圖使用骨幹？我很欣賞任何想法或建議。

謝謝！

Answer 1

我確實已經問過你了，我會讓你知道祕密：作弊。

你在這裏有兩個不同的應用程序層，並對它們有些困惑。第一層是系統中待辦事項之間的關係。這些存儲在傳統的對象關係模型中，您可以像創建其他RESTful應用程序一樣創建/檢索/更新/刪除它們。

第二層是您顯示這些對象和對象本身之間的關係。你想保留一些狀態。以下是重要的見解：只要系統中的每個對象GET，PUT或POSTED具有唯一ID，第二層就可以完全獨立於第一層。

第一層是一個RESTful API，用於「待辦事項管理器」。第二個是這個演示的獨特之處。它與第一個數據的關係是微不足道的。因此，我做了以下操作：將該表示層狀態編碼爲JSON對象，並將其寫入用戶配置文件中的8位乾淨文本字段。每次用戶改變狀態，我都會這樣做。

當應用程序加載時，它會從REST API和表示層信息中加載大部分數據，放棄表示層中任何不合理的表示層，然後啓動Backbone.History並初始化該表示。並且服務器不需要知道的任何詳細信息都是關於客戶端的工作方式。只要客戶說出您的RESTful術語，就可以將該「特定客戶關心的其他事物」保存到該文本字段中，而不會影響您的對象或其關係。