Backbone应用程序中嵌套表单视图的体系结构

时间:2014-05-10 23:30:58

标签: javascript backbone.js architecture views backbone-views

我是Backbone.js的新手,我正在开发Backbone应用程序,并且在如何构建我的视图方面遇到了一些困境。

基本上我想要的是:一个显示模型列表的视图,其中一个表单在该列表的顶部动画以创建新模型。棘手的是,我喜欢这种状态,在这种情况下,我的表格看起来与没有形式的州不同。

所以我希望我的应用程序看起来像路由/

 _________________________________
|                                 |
|  - Item one                     |
|  - Item two                     |
|  - Item three                   |
|  - Item four                    |
|  - Item five                    |
|_________________________________|

路线/new

 _________________________________
|                     |           |
|  - Item one         |  [Form]   |
|  - Item two         |           |
|  - Item three       |           |
|  - Item four        |           |
|  - Item five        |           |
|_____________________|___________|

当用户在这两种状态之间切换时,侧边栏/表单会进出动画。

您如何建议我处理这些观点/路线的架构?

在我当前有缺陷的实现中,我有一个视图来表示所有这些(使用css隐藏的形式),路由/new触发jQuery动画来显示表单。问题是/new依赖于之前访问/的用户,因为它依赖于已经在/中呈现的视图。然后直接访问此URL,因为视图尚未呈现。

我认为简单的解决方案是列表,列表+表单是两个单独的视图。这似乎效率低下,因为当用户从/导航到/new时,必须重新构建列表并从头开始呈现,即使它已经在屏幕上就好了。这种重新渲染也会使这两种状态之间的动画变得不可能。

我的直觉告诉我,这个问题有一个优雅的Backbonian解决方案,或者至少是一个完成工作的丑陋的解决方案,而不会破坏我的应用程序的网址。

谢谢!

1 个答案:

答案 0 :(得分:0)

您是否看过Backbone.js集合?根据我的理解,路径(/和/ new)中两个视图之间的区别是,在集合视图中有一个额外的形式。

因此,您可以使用Backbone模型来表示和使用视图设计和设计它。然后使用创建Backbone Collection [2]来包装模型。

然后为同一个集合定义两个差异集合视图。 [3] 使用Backbone Routing,您可以将两个不同的集合视图呈现给这两个URL。

[2] http://backbonejs.org/#Collection

[3] http://rotundasoftware.github.io/backbone.collectionView/

请参阅以下简单架构视图以获得解决方案。

Modular Architecture