javascript - 使用 Backbone.js 渲染布局

Question

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

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

问题

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

我的第一个想法

您会使用 Backbone.js View 来渲染布局，然后使用其模型绑定(bind) View 来渲染每一列吗？

我的第二个想法

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

这是我的第二个想法的片段:

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”。