用 Backbone 交换视图？

Question

我环顾四周，但尚未找到解决以下问题的好方法：

我有一个与页面上的 el 相关联的主干视图，它是一个容器元素，我将在传统意义上称之为“侧边栏”（为了解释起见）。 这个侧边栏元素的 inner-html 需要根据路由完全改变。但是，页面上的位置永远不会改变，并且总是会填满这个容器。

现在，对于一个初始原型，我在这个容器和放置在其中的视图之间建立了 1:1 的关系（我只编写了一条路线）。然而，现在，所述视图需要根据我提到的路线进行更改。

由于这些不同的视图具有完全不同的 html 标记、对事件的响应等...... 我认为拥有一个可以在子视图中交换的更高级别的视图是有意义的强>。当然，可行的一种解决方案是在同一个视图中处理所有内容，但必要的逻辑会很麻烦（而且非常笨拙）。

目前，这是我的想法（并已部分实施）：

• 拥有此页面元素的顶级视图。
• 根据路线，在必要的子视图中交换。
  • 这些子视图使用dust.js 呈现，其中页面上仅此组件的.html 模板通过AJAX 延迟加载、编译和缓存。后续渲染只包括使用新上下文调用缓存的“已编译”函数。
  • 此外，我打算初始化和缓存顶层视图中的每个子视图视图，这样我就只需要实例化、设置事件处理程序等一次。

然后，根据路线，查找关联的子视图视图（缓存），并将其交换到当前视图的位置。

现在，正如我所提到的，我已经完成了大部分的编码和...半工作。然而，我正在努力解决的是如何让这些子视图中的每一个独立存在并处理交换，但无论组件当前是否显示，都保持所有事件处理程序和当前状态继续存在强>。

基本上：

• 如何避免在每次需要子视图时完全销毁/重新实例化它们。也许这个手术并不像我想象的那么昂贵，我应该做后者。
• 由于顶级视图（“管理器”，如果您愿意的话）与容器 $el 绑定，如何交换子视图。

我确信有一个简单、优雅的解决方案。可惜我还没找到。

Answer 1

就第 1 点而言，我认为每次都创建视图并不太昂贵。

对于第 2 点 - 我建议使用 Backbone.Marionette https://github.com/derickbailey/backbone.marionette。它具有布局的概念，可让您定义应用的不同区域并单独呈现/管理它们。

我会推荐 Backbone.Marionette，不仅仅是因为第 2 点，而且我认为它允许您管理交互的方式比标准 Backbone 好得多。