如何使用Backbone处理单页应用程序的UI状态

Question

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

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

让我们以“TO-DO”应用程序为例（当然。）UI非常简单。我有以下“组件”......

• 结果列表，显示与当前所选条件匹配的当前待办事项集
• 我的待办事项列表（个人，工作，博客项目）
• 截止日期过滤器列表（今天，明天，本周，下周）
• 标签列表（错误，功能，构思，跟进）
• 搜索框

所需功能

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

数据模型

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

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

如何存储UI状态？

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

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

谢谢！

Answer 1

我确实有你提出的问题，我会让你知道这个秘密：作弊。

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

第二层是这些对象的显示与对象本身之间的关系。你想保留一些州。以下是重要的见解：只要系统中的每个对象GET，PUT或POSTED都有唯一的ID，第二层就可以完全独立于第一层。

第一层是“待办事项经理”的RESTful API。第二个是本演示文稿的独特之处。它与第一个数据的关系是微不足道的。所以这就是我所做的：我将表示层状态编码为JSON对象，并将其写入用户配置文件中的8位干净文本字段。每次用户改变状态时，我都会这样做。

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