如何使用骨干处理单页面应用程序的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术语，就可以将该“特定客户关心的其他事物”保存到该文本字段中，而不会影响您的对象或其关系。