2

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

我有一个与页面上的 el 相关联的主干视图,它是一个容器元素,在传统意义上我将其称为“侧边栏”(为了解释起见)。 这个侧边栏元素的 inner-html 需要根据 route 完全改变。但是,页面上的位置永远不会改变,并且会一直填满这个容器

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

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

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

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

然后,根据路线,查找关联的子视图视图(缓存),并将其交换到当前视图的位置。

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

基本上:

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

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

4

1 回答 1

1

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

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

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

于 2012-06-18T15:56:24.953 回答