用Backbone交换视图?

我环顾四周,但还没有找到一个很好的解决方案,以下问题:

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

现在,对于一个初始原型,我在这个容器和放在其中的视图之间有一个1:1的关系(我只编写了一条路径)。 然而,现在,根据我提到的路线,所述观点需要改变。

由于这些不同的视图具有完全不同的html标记,对事件的响应等等… 我曾经认为我有理由拥有一个更高级别的视图,可以交换子视图 。 当然,一个可行的解决方案是处理同一视图中的所有内容,但必要的逻辑将是繁琐的(而且非常笨重)。

目前,这就是我的想法(并已部分实施)

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

然后,根据路径,查找关联的子视图View(缓存),并将其替换为当前视图。

现在,正如我所提到的,我有这个主要是编码和…半工作。 但是,我正在努力的是如何让每个子视图独立存在并处理交换,但是无论组件当前是否显示,都要保持所有事件处理程序和当前状态继续存在

基本上:

  • 如何避免每次需要时完全破坏/重新实例化子视图。 也许这个操作不像我想的那么昂贵,我应该简单地做后者。
  • 作为顶级视图(“经理”,如果你愿意)与容器$ el绑定,如何交换子视图。

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

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

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

我建议Backbone.Marionette不仅仅是针对第2点,而是因为它允许你管理交互的方式在我看来比标准的Backbone更好。