如何处理UI状态为单页应用随着骨干网 [英] How to Handling UI State for Single Page App With Backbone

问题描述

多多包涵，因为我从一个传统的Web开发背景的，使用ASP.Net，甚至是服务器端的MVC。我试图用Backbone.js的帮助整理我的javascript code和构建UI建立一个高度互动的单页的应用程序。

Bear with me as I am coming from a traditional web development background, using ASP.Net, and even server side MVC. I am attempting to build a highly interactive single-page application using Backbone.js to help organize my javascript code and build the UI.

我有一些概念的麻烦，或方法，以建设我的UI的组成部分，并决定如何处理某些方面。我要利用这个过于简单化的屏幕截图作为我的提问和讨论的基础。

I am having trouble with some concepts, or approaches to building the components of my UI, and deciding how to handle certain aspects. I am going to use this oversimplified screen shot as a basis for my questions and discussion.

让我们用一个TO-DO应用为例（当然）用户界面是pretty简单。我有以下的组件...

Let's use a "TO-DO" application as an example (of course.) The UI is pretty simple. I have the following "components"...

• 一个结果列表，显示当前设置待办事项符合当前选择条件的
的

• 列表我的待办事项清单（个人，工作，博客项目）


• 到期日滤波器（今天，明天，本周，下周）
列表

• 标签的列表（错误，功能，理念，跟踪）


• 搜索框

所需的功能

• 更新的结果，只要任何的搜索条件的变化（选择列表中，选择一个适当的数据，选择一个或多个标签，输入搜索文本，等等。）


• 用户可以编辑，添加和删除列表。 （不是真的在这个模拟了显示。）


• 用户可以编辑，添加和删除标记。 （不是真的在这个模拟了显示。）


• 用户可以编辑，添加和删除待办事项。 （不是真的在这个模拟了显示。）

数据模型

有几种模式，我认定是数据相关。这些都是很容易识别。

There are several models that I identified that are "data" related. These were easy to identify.

• 待办事项（重presents一个待办事项）


• ToDoCollection（重presents待办事项的集合）


• TodoList的（再presents一个待办事项列表）


• ToDoListCollection（重presents待办事项列表的集合）


• 标签（重presents一个标签）


• TagCollection（重presents的标签集合）

如何存储界面状态？

这是在那里我有麻烦。我想表明这在我的菜单中的项目（在左侧）当前选择。我可以肯定的事件，并为他们选择添加一个选择类项目，但我也有规矩，比如只有一个列表可以同时选择，但可以在选择任意数量的标签一个时间。此外，由于待办事项列表菜单和标签菜单是动态的，他们已经与一个ToDoListCollection和TagCollection模型已经被关联。他们根据这些数据模型的状态。

This is where I am having trouble. I want to show which items in my menus (on the left side) are currently selected. I can certainly listen for events and add a "selected" class to items as they are selected, but I also have rules, like "only one list can be selected at a time", but "any number of tags" can be selected at a time. Also, because the To-Do List menu and the tags menu are dynamic, they already are associated with a ToDoListCollection and TagCollection models already. They are rendered according to the state of these "data models".

所以，我怎么处理这个UI状态的使用骨干所有这些不同意见的管理？我AP preciate任何意见或建议。

So, how do I handle the management of this UI state for all these different views using Backbone? I appreciate any ideas or suggestions.

谢谢！

推荐答案

我正是你做的问题，我会让你知道的秘密：骗

I had exactly the question you did, and I'll let you know the secret: cheat.

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

What you have here is two different application layers, and some confusion about them. The first layer is the relationship between to-do objects in your system. These, you store in a traditional object relational model, and you create/retrieve/update/delete them as you would any other RESTful application.

第二层是您的这些对象的显示，并且对象本身之间的关系。有一些国家有什么你想preserve。这里的重要启示：只要每个对象GET，PUT，或发布到系统都有唯一的ID，第二层可以完全独立的第一个

The second layer is the relationship between your display of these objects, and the objects themselves. There's some state there you want to preserve. Here's the important insight: as long as every object GET, PUT, or POSTED to the system has a unique ID, the second layer can be completely independent of the first.

第一层是一个RESTful API来待办事项的经理。第二个是唯一的这个presentation东西。这是在第一个关系数据脆弱。因此，这里是我所做的：我带codeD是presentation层状态成JSON对象，并在用户的个人资料写的8位干净的文本字段。每当用户改变状态，我这样做。

The first layer is a RESTful API to "a to-do manager." The second is something unique to this presentation. It's relationship to data in the first is tenuous. So here's what I did: I encoded that presentation layer state into a JSON object and wrote it to an 8-bit clean text field in the user's profile. Every time the user changes state, I do that.

当应用程序加载，加载大量来自REST API和presentation层信息数据，在presentation层，它是没有意义的放弃所有，然后开始Backbone.History并初始化presentation。而服务器并不需要知道的任何的所有有关客户端如何工作的细节。只要客户说你的REST风格的行话，它可以节省杂事这个特殊的客户关心到文本字段，而不会影响你的对象或自己的关系。

When the app loads, it loads the bulk of the data from the REST API and the presentation layer information, discards any in the presentation layer that doesn't make sense, and then starts Backbone.History and initializes the presentation. And the server doesn't need to know any details at all about how the client works. As long as the client speaks your RESTful lingo, it can save "miscellaneous things this particular client cares about" to that text field without affecting your objects or their relationship.

这篇关于如何处理UI状态为单页应用随着骨干网的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！