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

问题描述

|| 请耐心等待，因为我来自使用ASP.Net甚至服务器端MVC的传统Web开发背景。我正在尝试使用Backbone.js构建高度交互的单页应用程序，以帮助组织我的JavaScript代码并构建UI。 我在构建UI组件的某些概念或方法时遇到了麻烦，并决定如何处理某些方面。我将使用这个过于简化的屏幕截图作为我进行问题和讨论的基础。 让我们以一个“ TO-DO \”应用程序为例（当然。）UI非常简单。我有以下\“组件\” ... 结果列表显示与当前选定条件匹配的当前待办事项集 我的待办事项清单（个人，工作，博客项目） 截止日期过滤器列表（今天，明天，本周，下周） 标签列表（错误，功能，想法，跟进） 搜索框 所需功能 只要任何搜索条件发生变化（选择列表，选择到期数据，选择一个或多个标签，输入搜索文字等），就更新结果。 用户可以编辑，添加和删除列表。 （在此模型中并未真正显示） 用户可以编辑，添加和删除标签。 （在此模型中并未真正显示） 用户可以编辑，添加和删除待办事项。 （在此模型中并未真正显示） 数据模型 我确定了几种与“数据”相关的模型。这些很容易识别。 待办事项（代表一个待办事项） ToDoCollection（代表待办事项的集合） ToDoList（代表一个待办事项列表） ToDoListCollection（代表待办事项列表的集合） 标签（代表单个标签） TagCollection（代表标签的集合） 如何存储UI状态？ 这是我遇到麻烦的地方。我想显示菜单（左侧）中的哪些项目当前处于选中状态。我当然可以侦听事件并在选定项目时向其添加“ selected”类，但是我也有规则，例如“一次只能选择一个列表”，但是可以使用“任意数量的标签” \“可以一次选择。另外，由于“待办事项列表”菜单和“标签”菜单是动态的，因此它们已经与ToDoListCollection和TagCollection模型相关联。根据这些“数据模型”的状态来渲染它们。 那么，如何使用Backbone处理所有这些不同视图的UI状态管理？我感谢任何想法或建议。 谢谢！     

解决方法

        我确切地问了你一个问题，我会告诉你一个秘密：作弊。 您在这里拥有两个不同的应用程序层，并对它们有些困惑。第一层是系统中待办事项之间的关系。将它们存储在传统的对象关系模型中，就像创建任何其他RESTful应用程序一样，您可以创建/检索/更新/删除它们。 第二层是这些对象的显示与对象本身之间的关系。您要保留一些状态。这是重要的见解：只要对系统的每个对象GET，PUT或POSTED都有唯一的ID，第二层就可以完全独立于第一层。 第一层是“待办事项管理器”的RESTful API。第二层是此演示文稿特有的内容。首先，它与数据的关系是脆弱的。因此，这就是我的工作：我将表示层状态编码为JSON对象，并将其写入用户个人资料中的8位纯文本字段中。每当用户更改状态时，我都会这样做。 应用加载时，它会从REST API和表示层信息中加载大量数据，丢弃表示层中没有任何意义的数据，然后启动Backbone.History并初始化表示。服务器不需要任何有关客户端工作原理的详细信息。只要客户端说出您的RESTful语言，它就可以将“该特定客户端关心的杂项”保存到该文本字段，而不会影响您的对象或它们之间的关系。