Backbone.js - 存储状态信息的位置?

nra*_*itz 44 javascript model-view-controller backbone.js

我是Backbone.js的新手,我正试图找出状态变量应该存在的位置.我的用例:

我有一个应用程序,为一本书提供阅读界面(我知道,经典的例子,对吧?).我的模型是BookPage每个的集合类.应用程序的结构看起来大致如此(原谅ASCII visio):

+------------+
| Controller |
+------------+
    |      Views                 Models
    | +--------------+      +----------------+
    |-|  IndexView   |------| BookCollection |
    | +--------------+      +----------------+
    |                               |
    | +--------------+      +----------------+
    +-|   BookView   |------|     Book       |
      +--------------+      +----------------+
       |                            |
       | +--------------+           |
       |-|  TitleView   |-+         |
       | +--------------+ | +----------------+
       |                  +-|     Page       |
       | +--------------+ | +----------------+ 
       +-|   PageView   |-+
         +--------------+ 
Run Code Online (Sandbox Code Playgroud)

也就是说,Controller实例化和协调两种观点,IndexViewBookView通过模型的支持.该BookView实例化和协调一组子视图(实际上有比这里更所示).

国家信息包括:

  • 当前的书(指针或id)
  • 当前页面(指针或id)
  • 其他UI状态变量,例如页面上的图像是否可见,其他窗口小部件是打开还是关闭等.

我的问题是,这个州的信息应该在哪里生活?可能的选择包括:

  • 这些模型可能是国家意识的.这是有道理的,因为它们旨在存储数据和视图可以监听状态更改,但它似乎不符合预期的Backbone.js模式,并且不会总是有意义(例如,打开图像对PageView应适用于所有的网页,而不仅仅是当前的)

  • 一个特殊的单模式旨在保持状态信息.再一次,有意义,易于倾听,所有视图都可以绑定它 - 但同样,这似乎超出了标准的MVC.

  • 意见,谁负责的UI状态-但是这需要意见,了解彼此的获得状态信息,这似乎不正确

  • 控制器,它应该路由应用程序的状态-这是有道理的,但它意味着一个有点奇怪的往返,例如User selects "Show Images" --> View event listener is called --> View informs Controller --> Controller updates state --> Controller updates View(而不是简单User selects "Show Images" --> View event listener is called --> View updates)

我想在某些方面这是一个通用的MVC问题,但我无法理解它.应用程序的哪一部分应该负责保存当前状态?

更新:为了将来的参考,我使用全局单例状态模型来解决这个问题.UI流程如下:

  1. 查看UI处理程序除了更新外什么也不做 app.State
  2. 我的路由器也只做更新app.State- 它们本质上是专门的视图,可以显示和响应URL更改
  3. 视图侦听更改app.State并相应地更新

我的应用程序是开源的 - 您可以在Github上看到代码.这里的相关部分是State模型,我已经扩展到处理(de)序列化URL的状态.

Tex*_*Tex 13

不要将Backbone应用程序限制为Backbone构造.如果您发现您的应用程序需要某些功能不能很好地适应Backbone的一个构造,请不要仅仅为了保持Backbone中的所有内容而将其整合到一个中.

我发现这个骨干样板在这方面很有帮助.它为您设置模块,并为您提供扩展Backbone.Events的应用程序对象(如之前链接的文章中所述).此app对象可用于存储实例化的模型,视图和控制器/路由器,您应该随意将自己的非主干模块添加到app对象,以处理不完全适合其中一个的责任.骨干构造.


小智 12

为什么不创建状态模型来存储和描述当前状态?我不认为那是错的.由于当前状态涉及多个模型,我认为创建状态模型来存储和接收当前状态是合理的.

然后,控制器可以与状态模型通信以获得当前状态.UI状态应该存储在相应的模型中.状态模型知道哪个书和哪个页面,然后书籍和页面模型跟踪他们当前的UI状态.