如何使用Backbone处理单页应用程序的UI状态
当我来自传统的Web开发背景,使用ASP.Net,甚至服务器端MVC时,请耐心等待.我正在尝试使用Backbone.js构建一个高度交互的单页面应用程序来帮助组织我的javascript代码并构建UI.
我遇到了一些概念或构建UI组件的方法,并决定如何处理某些方面.我将使用这个过度简化的屏幕截图作为我的问题和讨论的基础.
我们以"TO-DO"应用程序为例(当然.)UI非常简单.我有以下"组件"......
- 结果列表,显示与当前所选条件匹配的当前待办事项集
- 我的待办事项列表清单(个人,工作,博客项目)
- 截止日期过滤器列表(今天,明天,本周,下周)
- 标签列表(错误,功能,想法,跟进)
- 一个搜索框
期望的功能
- 每当任何搜索条件发生变化时更新结果(选择列表,选择到期数据,选择一个或多个标签,输入搜索文本等)
- 用户可以编辑,添加和删除列表.(在这个模拟中没有真正显示)
- 用户可以编辑,添加和删除标签.(在这个模拟中没有真正显示)
- 用户可以编辑,添加和删除待办事项.(在这个模拟中没有真正显示)
数据模型
我发现有几种与"数据"相关的模型.这些很容易识别.
- ToDo(代表单个待办事项)
- ToDoCollection(代表待办事项的集合)
- ToDoList(代表单个待办事项列表)
- ToDoListCollection(表示待办事项列表的集合)
- 标记(代表单个标记)
- TagCollection(表示标签的集合)
如何存储UI状态？
这是我遇到麻烦的地方.我想显示当前选中菜单(左侧)中的哪些项目.我当然可以听取事件并在选择项目时添加"选定"类,但我也有规则,例如"一次只能选择一个列表",但是可以选择"任意数量的标签"一时间 此外,由于待办事项列表菜单和标签菜单是动态的,因此它们已经与ToDoListCollection和TagCollection模型相关联.它们根据这些"数据模型"的状态进行渲染.
那么,如何使用Backbone处理所有这些不同视图的UI状态管理？我感谢任何想法或建议.
谢谢!
我确实有你提出的问题,我会让你知道这个秘密:作弊.
你在这里有两个不同的应用层,并对它们有些困惑.第一层是系统中待办事项对象之间的关系.这些,您存储在传统的对象关系模型中,您可以像创建任何其他RESTful应用程序一样创建/检索/更新/删除它们.
第二层是这些对象的显示与对象本身之间的关系.你想保留一些州.这里有重要的见解:只要系统中的每个对象GET,PUT或POSTED都有唯一的ID,第二层就可以完全独立于第一层.
第一层是"待办事项管理器"的RESTful API.第二个是本演示文稿的独特之处.它与第一个数据的关系是微不足道的.所以这就是我所做的:我将表示层状态编码为JSON对象,并将其写入用户配置文件中的8位干净文本字段.每次用户改变状态时,我都这样做.
当应用程序加载时,它会从REST API和表示层信息中加载大量数据,丢弃表示层中没有意义的任何数据,然后启动Backbone.History并初始化表示.并且服务器根本不需要了解客户端如何工作的任何细节.只要客户说出您的RESTful术语,就可以将"特定客户关心的杂项"保存到该文本字段,而不会影响您的对象或其关系.