Javascript 用主干交换视图？

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

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

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

因为这些不同的视图具有完全不同的html标记、对事件的响应等我曾认为我应该有一个在子视图中交换的更高级别视图。当然，一个可行的解决方案是在同一个视图中处理所有问题，但必要的逻辑将非常繁琐（而且相当笨拙）

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

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

然后，根据路由，查找关联的子视图（缓存），并将其替换为当前视图

现在，正如我所提到的，我已经把这些大部分编码好了。。。半工作状态。但是，我正在努力解决的是如何使这些子视图独立存在并处理交换，但无论组件当前是否显示，都要保持所有事件处理程序和当前状态继续有效

基本上：

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

---

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

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

对于第二点，我建议使用主干线。木偶。它具有布局的概念，允许您定义应用程序的不同区域，并分别渲染/管理它们

---

我推荐主干网。木偶网不仅用于第2点，而且在我看来，它允许您管理交互的方式要比标准主干网好得多。

谢谢您的指点！它最终变得非常有用。尽管事实上我以前见过主干木偶，而且实际上也跟着主干木偶，但我对主干木偶或它当时试图解决（或消除样板文件）的真正问题没有足够的了解。这一次，它确实让人毛骨悚然，因为它如此准确地解决了我所经历的障碍！感谢您将我的问题与这个非常有用的解决方案联系起来！不客气：-）我也经历过类似的步骤，所以这次很清楚。