javascript - 用 Backbone 交换 View ？

Question

我环顾四周，但还没有找到解决以下问题的好方法:

我有一个 Backbone View 绑定(bind)到页面上的 el，这是一个容器元素，在传统意义上我称之为“侧边栏”(为了便于解释)。 此侧边栏元素的 inner-html 需要根据路线完全更改。但是，页面上的位置永远不会改变，并且会始终填充此容器。

现在，对于初始原型(prototype)，我在这个容器和放置在其中的 View 之间建立了 1:1 的关系(我只编写了一条路线)。但是现在，如我所提到的，所述 View 需要根据路线进行更改。

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

目前，这是我的想法(并已部分实现):

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

然后，根据路由，查找关联的 subview View (缓存)，并将其交换到当前 View 的位置。

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

基本上:

• 如何避免在每次需要时完全销毁/重新实例化 subview 。也许这个手术并不像我想象的那么昂贵，我应该只做后者。
• 因为顶级 View (“管理器”，如果你愿意的话)绑定(bind)到容器 $el，如何在 subview 中交换。

我确信有一个简单、优雅的解决方案。不幸的是，我还没有找到它。

Answer 1

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

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

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