Backbone 应用程序中嵌套表单视图的架构

Question

我是 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 解决方案，或者至少是一个丑陋的解决方案，可以完成工作，而不会破坏我的应用程序的 url。

谢谢！

Answer 1

您是否查看过 Backbone.js 集合。根据我的理解，路由（/和/new）中的两个视图之间的区别在于，一个在集合视图中具有额外的形式。

因此，您可以做的是，使用 Backbone 模型来表示和项目，并使用视图进行设计。然后使用 create a Backbone Collection [2] 来包装模型。

然后为同一个集合定义两个不同的集合视图。 [3] 使用主干路由，您可以将两个不同的集合视图呈现给这两个 URL。

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

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

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