与 Backbone 交换视图？

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

我有一个主干视图绑定到页面上的 el ，它是传统意义上的“侧边栏”的容器元素（为了解释起见）。这个侧边栏元素的inner-html需要根据路线完全改变。然而，页面上的位置永远不会改变，并且将始终填充此容器.

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

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

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

• 拥有此页面元素的顶级视图。
• Depending on the route, swap in the necessary sub-view.
  • 这些子视图使用dust.js 进行渲染，其中页面上该组件的.html 模板通过AJAX 进行延迟加载、编译和缓存。后续渲染仅包括使用新上下文调用缓存的“编译”函数。
  • 此外，我将初始化并缓存顶级视图中的每个子视图，这样我只需实例化、设置事件处理程序等一次。

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

现在，正如我所提到的，我已将其大部分编码并......半工作。然而，我正在挣扎的是如何让每个子视图独立存在并处理交换，但保持所有事件处理程序和当前状态继续存在，无论组件当前是否显示.

基本上：

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

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

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