如果要使用Backbone.js和jQuery(例如,两个 Controller 每个都需要唯一的页面布局)来构建单个页面的Web应用程序(SPWA),您将如何呈现该布局?
问题
当用户请求映射到ControllerB的路由时,需要更改整个页面布局以不再使用ControllerA布局。这将隐藏ControllerA的布局并显示ControllerB的布局-或者,如果尚未在DOM中,则渲染该布局。
我的第一个想法
您会使用Backbone.js View 来呈现布局,然后使用模型绑定(bind) View 来呈现每一列吗?
我的第二个想法
您是否会向使用jQuery呈现布局的 Controller 添加一个setup/layout方法,然后允许负责该路线的 Action 完成?在 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...');
}
});
谢谢
感谢您抽出宝贵的时间来回复。我很感激!
最佳答案
我更喜欢已经在页面上布置了应用程序的框架。因此,您具有页面上不同元素的完整布局,并针对这些元素创建了主 View ,以便正确布置它们。
当您使用单个布局时,此方法效果很好;当您使用多个布局时,事情会变得很有趣。您可以将所有布局放在页面上,并根据逻辑隐藏不同的配置。您可以看到布局已成为层次结构的初始 View 。因此,您渲染布局,然后加载 View 。
没有真正的方法可以做到这一点。每个都有优点和缺点。我不会做的一件事是在 Controller 中渲染布局。我将所有渲染和html放在 View 中,以便可以处理 Controller 和模型上的逻辑(在这里考虑MVC)。