Javascript 使用Backbone.js渲染布局

如果要使用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...');
    }
});

谢谢

---

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

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

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

---

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

我倾向于同意Julien的观点——让布局尽可能保持无状态很好。每件事都会在页面上列出，至少是以骨架的形式。当需要显示特定的布局或配置时，可以惰性地呈现其内容，并使用CSS显示UI的该部分。互斥的CSS类在这方面很有用，比如：“项目打开”、“文档打开”、“注释打开”。

无论主干还是任何其他js框架/库，我都面临着完全相同的问题

假设您有一个需要单列布局的登录表单视图，并将该视图插入到该单个div中

然后，一旦成功登录，就会以某种方式呈现另一个布局（比如页眉区域、页脚区域、左侧区域，然后是其他所有内容的主区域（右列）

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

然后是更复杂的情况。主导航视图内的每个链接都会加载一个新的子布局，以供进一步的视图插入

我不希望常规控制器/视图关心当前呈现的布局，只希望它们的容器元素存在并准备好注入

我想用一种聪明的方式使用路线（不是传统意义上的路线），比如：

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”，则“regex表示除sign_in以外的任何内容”和“/section1/*”上面的两个路由匹配器都将运行，这意味着将呈现主布局，然后在有意义的情况下呈现section1子布局

然后，所有其他正常控制器使用传统意义上的路由

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

---

我希望听到有人设计并实现了一些优雅的东西。

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

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

ModuleController都可以在init上访问appController。捕获哈希位置时，它们会向包含pageManifest对象的appController发送pageChange事件。pageManifest对象包含设置相应视图所需的所有信息，例如面包屑信息、标头信息，最重要的是，还有一个引用to实例化的contentView。appController使用pageManifest中的信息设置不同的持久化视图，删除contentContainer中以前的contentView，并将模块提供的contentView插入容器中

这样，不同的设计师可以工作