如何解决如何处理带有主干的单页应用程序的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语言,它就可以将“该特定客户端关心的杂项”保存到该文本字段,而不会影响您的对象或它们之间的关系。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。