用Backbone交换视图?

时间:2012-06-18 15:06:54

标签: javascript jquery backbone.js

我环顾四周但尚未找到一个很好的解决方案:

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

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

由于这些不同的观点具有完全不同的html标记,对事件的响应等... 我曾经认为我有理由拥有一个更高级别的视图,可以交换子视图。当然,一个 工作 的解决方案是处理同一视图中的所有内容,但必要的逻辑会很麻烦(并且非常笨拙)。

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

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

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

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

基本上

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

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

1 个答案:

答案 0 :(得分:1)

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

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

我建议Backbone.Marionette不只是针对第2点,但我认为它允许你管理互动的方式比标准的Backbone更好。