我环顾四周,但还没有找到解决以下问题的好方法:
我有一个 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 中交换。
我确信有一个简单、优雅的解决方案。不幸的是,我还没有找到它。
最佳答案
就第 1 点而言,我认为每次都创建 View 不会太昂贵。
对于第 2 点 - 我建议使用 Backbone.Marionette https://github.com/derickbailey/backbone.marionette .它具有布局的概念,可让您定义应用的不同区域并分别呈现/管理它们。
我推荐 Backbone.Marionette 不仅是因为第 2 点,而且我认为它允许您管理交互的方式比标准 Backbone 好得多。
关于javascript - 用 Backbone 交换 View ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11085660/