使用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

我倾向于同意朱利安 - 保持你的布局尽可能无状态是很好的.至少,所有东西总是以骨架的形式排列在页面上.当需要显示特定的布局或配置时,您可以懒惰地呈现其内容,并使用CSS显示UI的该部分.相互排斥的CSS类对此非常有用,例如:"projects-open","documents-open","notes-open".

Answer 2

我更喜欢在页面上放置应用程序的框架.因此,您可以在页面上使用不同元素的完整布局,并根据这些元素创建主干视图,以便正确布局.

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

没有真正的一种方法可以做到这一点.各有利弊.我不会做的一件事是在控制器中渲染布局.我将所有渲染和html放在视图中,这样我就可以处理控制器和模型上的逻辑(想想MVC).

Answer 3

我正在使用backbone.js设计基于模块的Intranet系统,我基本上在文档加载时使用以下算法.

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

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

这样,不同的设计人员可以处理不同的模块,他们必须知道的是pageManifest对象的规范以及contentView的外观.他们可以设置自己的复杂路由系统,使用自己的模型和自定义的contentViews(虽然我们计划有一个listViews,objectViews等库继承).

我们现在处于设计阶段,所以我不能保证这是我们最终会使用的设计,或者我们没有找到任何漏洞,但从概念上讲,我们认为这是合理的.评论？