如何用骨干处理单页应用程序的UI状态

Question

使用ASP.NET甚至服务器端MVC，我来自传统的Web开发背景时，请随身携带。我正在尝试使用Backbone.js构建高度交互式的单页应用程序，以帮助组织我的JavaScript代码并构建UI。

我在某些概念或构建UI组件的方法上遇到麻烦，并决定如何处理某些方面。我将使用此过度简单的屏幕截图作为我的问题和讨论的基础。

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

• 结果列表显示了当前符合当前选定条件的待办事项集
• 我的待办事项列表（个人，工作，博客项目）的列表
• 到期日期过滤器的列表（今天，明天，本周，下周）
• 标签列表（错误，功能，想法，跟进）
• 一个搜索框

所需的功能

• 每当任何搜索条件更改（选择列表，选择适当的数据，选择一个或多个标签，输入搜索文本等）时，更新结果。
• 用户可以编辑，添加和删除列表。 （在此模拟中并没有真正显示）
• 用户可以编辑，添加和删除标签。 （在此模拟中并没有真正显示）
• 用户可以编辑，添加和删除待办事项项目。 （在此模拟中并没有真正显示）

数据模型

我发现有几种与“数据”相关的模型。这些很容易识别。

• todo（代表一个单一待办事项）
• todocollection（代表待办事项的集合）
• Todolist（代表一个单一的待办事项清单）
• TodoListCollection（表示待办事项列表的集合）
• 标签（表示一个标签）
• tagcollection（表示标签的集合）

如何存储UI状态？

这是我遇到麻烦的地方。我想显示目前选择的菜单中的哪些项目（左侧）。我当然可以收听事件，并在选择项目中添加“选择”类，但是我也有规则，例如“一次只能选择一个列表”，但是可以选择“任何数量的标签”时间。另外，由于待办事项列表菜单和标签菜单是动态的，因此它们已经与TodoListCollection和TagCollection模型相关联。它们是根据这些“数据模型”的状态渲染的。

那么，如何使用主链处理所有这些不同视图的UI状态的管理？感谢任何想法或建议。

谢谢！

Answer 1

我完全有一个问题，我会让你知道秘密：作弊。

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

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

第一层是“待办事项经理”的宁静API。第二个是本演示文稿的独特之处。它与第一个数据的关系很脆弱。因此，这是我所做的：我将演示层状态编码为JSON对象，并将其写入用户配置文件中的8位干净文本字段。每当用户更改状态时，我都会这样做。

当应用程序加载时，它会加载来自REST API的大部分数据和演示层信息，丢弃在演示层中没有意义的任何数据，然后启动骨干。历史性。历史并初始化了演示文稿。服务器不需要知道 任何 有关客户如何工作的详细信息。只要客户说您的静静术语，它就可以将“特定客户关心的其他内容”保存到该文本字段而不会影响您的对象或他们的关系。