将视图与主干网交换

Swap out views with Backbone?

本文关键字:交换 主干网 视图      更新时间:2023-09-26

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

我有一个与页面上的 el 绑定的 Backbone 视图,它是一个容器元素,用于我称之为传统意义上的"侧边栏"(为了解释)。 这个侧边栏元素的 inner-html 需要根据路由完全改变。 但是,页面上的位置永远不会改变,并且将始终填充此容器

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

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

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

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

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

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

基本上:

  • 如何避免每次需要子视图时完全销毁/重新实例化子视图。 也许这个操作并不像我想象的那么昂贵,我应该简单地做后者。
  • 由于顶级视图("管理器",如果您愿意)与容器$el相关联,因此如何在子视图中交换。

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

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

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

我推荐Backbone.Marionette不仅仅是第2点,而且在我看来,它允许你管理交互的方式比标准的Backbone要好得多。