使用 Backbone.js 渲染布局

Question

例如，如果您要使用 Backbone.js 和 jQuery 构建单页 Web 应用程序 (SPWA)，并使用两个控制器，每个控制器都需要唯一的页面布局，那么您将如何呈现该布局？

• ControllerA 是三列布局。
• ControllerB 是两列布局。
• 默认路由激活 ControllerA.Welcome()——初始渲染。
• 两个控制器在其列中呈现不同的视图，充分利用 Backbone.js 模型/视图的所有优势。

问题

当用户请求映射到ControllerB的路由时，整个页面布局需要更改为不再使用ControllerA布局。这将隐藏 ControllerA 的布局并显示 ControllerB 的布局——或者，渲染布局（如果尚未在 DOM 中）。

我的第一个想法

您会使用 Backbone.js 视图来渲染布局，然后使用其模型绑定视图来渲染每列吗？

我的第二个想法

您是否会向使用 jQuery 呈现布局的控制器添加一个设置/布局方法，然后允许负责路由的操作执行此操作？在控制器中使用 jQuery 对我来说有点不舒服，但是，我希望控制器负责确保正确的布局对其路由可见。

以下是我的第二个想法的片段：

var Controller = Backbone.Controller.extend
({
    routes :
    {
       "" : "welcome" // default action
    }
    /** Constructor **/
    ,initialize: function(options)
    {
        console.log('Workspace initialized');               
    }
    // LAYOUT
    ,renderLayout : function ()
    {
        console.log('Rendering Layout.');
        var $ = window.$;
        var layout = require('js/layout/app/big_menu');
        $(layout.parent).html(layout.html);
    }
    // ACTIONS
    /** Default Action **/
    ,welcome : function ()
    {
        this.renderLayout();
        console.log('Do the whole model/view thing...');
    }
});

谢谢

感谢您花时间回复。我很感激！

Answer 1

我倾向于同意 Julien 的观点——尽可能保持布局无状态是件好事。所有内容总是以骨架形式布置在页面上，至少是这样。当需要显示特定的布局或配置时，您可以延迟渲染其内容，并使用 CSS 显示 UI 的该部分。互斥的 CSS 类对此很有用，例如：“projects-open”、“documents-open”、“notes-open”。

Answer 2

我更喜欢已经在页面上布置应用程序的框架。因此，您拥有页面上不同元素的完整布局，并针对这些元素创建主干视图，以便它们正确布局。

当你有一个布局时，这很有效，当你有多个布局时，事情会变得有趣。您可以将所有布局放在页面上，并根据您的逻辑隐藏不同的配置。您可以看到布局是层次结构的初始视图。因此，您渲染布局，然后加载视图。

没有真正的一种方法可以做到这一点。每个都有优点和缺点。我不会做的一件事是在控制器中渲染布局。我将所有渲染和 html 放在视图中，这样我就可以处理控制器和模型上的逻辑（这里考虑 MVC）。

Answer 3

我正在使用backbone.js 设计一个基于模块的内联网系统，并且我基本上在文档加载上使用以下算法。

• 创建 appController，应用程序的单例控制器。
• appController 创建 mainView，这是负责渲染页面骨架并处理页面上持久项目（登录/注销按钮等）的点击的视图。
• mainView 为页面的不同部分创建了许多 childView，导航、面包屑、标题、工具栏、内容容器等。这些是应用程序的固定装置，它们不会改变，尽管它们各自的内容会改变。 contentArea 特别可以包含任何布局。
• appController 运行已注册的模块，为每个模块启动 mainModuleController。这些都有命名空间路由模式。
• Backbone.history.start()

moduleController 都在 init 时获得对 appController 的访问权限。当捕获哈希位置时，它们将 pageChange 事件发送到包含 pageManifest 对象的 appController。 pageManifest 对象包含设置各个视图所需的所有信息，例如面包屑信息、标题信息，最重要的是对实例化 contentView 的引用。 appController使用pageManifest中的信息来设置不同的持久视图，删除contentContainer中以前的contentView并将模块提供的contentView插入到容器中。

这样，不同的设计人员可以在不同的模块上工作，他们所需要知道的只是 pageManifest 对象的规范以及 contentView 的外观。他们可以建立自己的复杂路由系统，使用自己的模型和定制的 contentView（尽管我们计划有一个 listViews、objectViews 等库来继承）。

我们现在正处于设计阶段，所以我不能真正保证这是我们最终使用的设计，或者我们没有在其中发现任何漏洞，但从概念上讲，我们认为它是合理的。评论？

Answer 4

无论 Backbone 还是任何其他 js 框架/库，我都遇到完全相同的问题。

想象一下，您有一个 SIGN IN FORM 视图，它需要单列布局，并且您将该视图注入到该单个 div 中。

然后，一旦登录成功，就会以某种方式呈现另一个布局（假设有一个 HEADER 区域、FOOTER 区域、LEFT 区域，然后是 MAIN 区域（右列）用于其他所有内容。

标题可能包含 LOGO 视图（如果它具有功能）并且全局/用户菜单视图。左侧区域将包含主导航视图。

插入的其他视图使用。

主导航视图中的每个链接都会加载一个新的子布局，以供我不想 常规控制器/视图关心当前呈现的布局，只是它们的容器元素存在并且准备好注入，

我考虑以一种聪明的方式使用路由（不是传统意义上的），例如

function LayoutController() {
App.addRouteMatcher("/sign_in/*", this.renderSignInLayout); // single column
App.addRouteMatcher("regex to represent anything but sign_in", this.renderMainLayout); // header, footer, primary nav, main zone
App.addRouteMatcher("/section1/*", this.renderSubLayoutForSection1); // puts a 1 column layout in the main zone
App.addRouteMatcher("/section2/*", this.renderSubLayoutForSection2); // puts a 2 column layout in the main zone 
}

：路线是“/section1/whatever/sub/page/within/section/1”，“正则表达式代表除sign_in之外的任何内容”和“/section1/*”上方的两个路线匹配器都将运行，这意味着主要布局将是渲染，然后如果有意义的话，将渲染section1子布局。

然后所有其他普通控制器都使用传统意义上的路由。

需要有一种很好的方法来管理布局并确保这些布局、子布局和视图被安全地拆除，以确保内存泄漏等原因得到处理。

很想听到有人设计并实现了一些优雅的东西。