Backbone.js 如何处理带有主干的单页应用程序的UI状态

请容忍我，因为我来自传统的web开发背景，使用ASP.Net，甚至服务器端MVC。我正在尝试使用Backbone.js构建一个高度交互的单页应用程序，以帮助组织我的javascript代码并构建UI

我在构建UI组件以及决定如何处理某些方面的一些概念或方法上遇到了问题。我将使用这个过于简单的屏幕截图作为我提问和讨论的基础

让我们以“待办”应用程序为例（当然），UI非常简单。我有以下“组件”

• 一个结果列表，显示与当前选定条件匹配的当前待办事项集
• 我的待办事项列表（个人、工作、博客项目）
• 到期日筛选器列表（今天、明天、本周、下周）
• 标签列表（错误、功能、想法、后续行动）
• 搜索框

所需功能

• 每当任何搜索条件发生更改时（选择列表、选择到期数据、选择一个或多个标记、输入搜索文本等），都会更新结果
• 用户可以编辑、添加和删除列表。（此实体模型中未实际显示）
• 用户可以编辑、添加和删除标记。（此实体模型中未实际显示）
• 用户可以编辑、添加和删除待办事项。（此实体模型中未实际显示）

数据模型

我确定了几个与“数据”相关的模型。这些很容易识别

• ToDo（表示单个待办事项）
• ToDoCollection（表示待办事项的集合）
• ToDoList（表示单个待办事项列表）
• ToDoListCollection（表示待办事项列表的集合）
• 标记（表示单个标记）
• TagCollection（表示标记的集合）

如何存储用户界面状态？

这就是我遇到麻烦的地方。我想显示菜单（左侧）中当前选中的项目。我当然可以监听事件，并在项目被选中时将“selected”类添加到项目中，但我也有一些规则，比如“一次只能选择一个列表”，但“任意数量的标记”可以一次选择。此外，由于待办事项列表菜单和标记菜单是动态的，因此它们已经与ToDoListCollection和TagCollection模型关联。它们是根据这些“数据模型”的状态呈现的

那么，我如何使用主干网处理所有这些不同视图的UI状态管理？我很感激任何想法或建议

---

谢谢

我的问题正是你问的，我会告诉你秘密：欺骗

这里有两个不同的应用程序层，以及一些关于它们的混淆。第一层是系统中待办事项对象之间的关系。您可以将它们存储在传统的对象关系模型中，并像创建/检索/更新/删除任何其他RESTful应用程序一样创建/检索/更新/删除它们

第二层是这些对象的显示与对象本身之间的关系。那里有一些你想要保留的状态。这里有一个重要的见解：只要每个获取、放置或发布到系统的对象都有一个唯一的ID，第二层就可以完全独立于第一层

第一层是“待办事务管理器”的RESTful API。第二层是本演示文稿的独特之处。首先，它与数据的关系是脆弱的。下面是我所做的：我将表示层状态编码为一个JSON对象，并将其写入用户配置文件中的一个8位干净文本字段。每次用户更改状态时，我都会这样做

---

当应用程序加载时，它将加载REST API和表示层信息中的大部分数据，丢弃表示层中任何没有意义的数据，然后启动Backbone.History并初始化表示。而且服务器根本不需要知道客户机如何工作的任何细节。只要客户端使用您的RESTful行话，它就可以将“这个特定客户端关心的其他事情”保存到该文本字段中，而不会影响您的对象或它们的关系。

谢谢！我有一个我考虑过的问题，听起来有点像你说的。凯文，这是一个不同的问题。如果你能结束这个问题，用一种新的方式提问，这将有助于人们回答你。