布局和视图管理 [英] Layout and view management
问题描述
我首先骨干，我想，以管理用户和产品对象来实现一个简单的应用程序。页面布局始终是相同的：标题（首页），菜单（左列）和内容（右列），但标题和菜单内容取决于当前模块（用户或产品）
上。我搜索来管理我的页面布局的正确方法。其实，我管理我的Backbone.Router的每个方法的标题和菜单，但我认为这不是最好的解决方案。
VAR appRouter = Backbone.Router.extend（{
路线：{
用户：LISTUSER
用户/新：NEWUSER
用户/：ID：showUser
产品：listProduct
产品/新：新品推荐，
产品/：ID：显示产品
}， LISTUSER：功能（）{
如果（this.userHeaderView == NULL）{
VAR头=新UserHeaderView（）;
header.render（）;
this.userHeaderView =头;
}
如果（this.userMenuView == NULL）{
VAR菜单=新UserMenuView（）;
menu.render（）;
this.userMenuView =菜单;
}
this.contentView =新UserListView（）渲染（）。
} // ... 新品推荐：函数（）{
如果（this.productHeaderView == NULL）{
VAR头=新ProductHeaderView（）;
header.render（）;
this.productHeaderView =头;
}
如果（this.productMenuView == NULL）{
VAR菜单=新ProductMenuView（）;
menu.render（）;
this.productMenuView =菜单;
}
this.contentView =新NewProductView（）渲染（）。
} // ...
}）;
一个路由器不应该被用于管理应用程序的初始化。你应该创建一个管理初始化过程的应用对象，建立你总是需要等标题和菜单（请注意，骨干不包括的对象，如这一点。这是给你创造这个对象）。
路由器应该只知道它绝对需要知道，为了获取应用程序返回到被请求的状态。
我已经写在这几篇文章，虽然我的文章可做参考我Backbone.Marionette框架，我在说什么适用于标准的骨干使用，以及的原则：
的http://lostechies.com/derickbailey/2012/02/06/3-stages-of-a-backbone-applications-startup/
<一个href=\"http://lostechies.com/derickbailey/2012/01/02/reducing-backbone-routers-to-nothing-more-than-configuration/\" rel=\"nofollow\">http://lostechies.com/derickbailey/2012/01/02/reducing-backbone-routers-to-nothing-more-than-configuration/
<一个href=\"http://lostechies.com/derickbailey/2011/12/27/the-responsibilities-of-the-various-pieces-of-backbone-js/\" rel=\"nofollow\">http://lostechies.com/derickbailey/2011/12/27/the-responsibilities-of-the-various-pieces-of-backbone-js/
的http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/
<一个href=\"http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/\" rel=\"nofollow\">http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/
<一个href=\"http://lostechies.com/derickbailey/2011/08/30/dont-limit-your-backbone-apps-to-backbone-constructs/\" rel=\"nofollow\">http://lostechies.com/derickbailey/2011/08/30/dont-limit-your-backbone-apps-to-backbone-constructs/
我意识到，我建议你读比大概是要直接回答你的问题更多的信息。这些文章的结合，不过，应告知你一些不同的想法和观点，这将有助于塑造你的骨干使用，这样就可以避开一些关于路由器的常见错误，管理布局，关闭视图等
I begin with Backbone and I would like to implement a simple application in order to manage users and products objects. The page layout is always the same : the header (top page), the menu (left column) and the content (right column) but the header and menu contents depend on the current module (user or product).
I search the proper way to manage my page layout. Actually, I manage the header and menu in each method of my Backbone.Router but I think that is not the best solution.
var appRouter = Backbone.Router.extend({
routes: {
"users": "listUser",
"users/new": "newUser",
"users/:id": "showUser",
"products": "listProduct",
"products/new": "newProduct",
"products/:id": "showProduct"
},
listUser: function() {
if (this.userHeaderView == null) {
var header= new UserHeaderView();
header.render();
this.userHeaderView = header;
}
if (this.userMenuView == null) {
var menu= new UserMenuView ();
menu.render();
this.userMenuView = menu;
}
this.contentView = new UserListView().render();
}
// ...
newProduct: function() {
if (this.productHeaderView == null) {
var header= new ProductHeaderView();
header.render();
this.productHeaderView = header;
}
if (this.productMenuView == null) {
var menu= new ProductMenuView();
menu.render();
this.productMenuView = menu;
}
this.contentView = new NewProductView().render();
}
// ...
});
A router shouldn't be used to manage the application initialization. You should be creating an application object that manages the initialization process, sets up the headers and menus that you always need, etc. (Note that Backbone doesn't include an object such as this. It's up to you to create this object).
The router should only know what it absolutely needs to know, in order to get the application back to the state being requested.
I've written a few articles on this, and though my articles do reference my Backbone.Marionette framework, the principles of what I'm saying apply to standard Backbone use as well:
http://lostechies.com/derickbailey/2012/02/06/3-stages-of-a-backbone-applications-startup/
http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/
http://lostechies.com/derickbailey/2011/08/30/dont-limit-your-backbone-apps-to-backbone-constructs/
I realize that I'm suggesting you read far more information than is probably necessary to directly answer you question. The combination of these articles, though, should inform you of a number of different ideas and perspectives that will help shape your use of Backbone so that you can avoid some of the common mistakes regarding routers, managing layout, closing views, etc.
这篇关于布局和视图管理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
