3
本質上，我有一個應用程序佈局，具有特定路線的公用頁眉和頁腳部分。事情是我希望能夠在子路由命中時轉換此佈局的主要內容區域。使用Backbone和Marionette根據子路線更改佈局區域
實施例：#products是主要的途徑和＃產品/：ID爲副路由。
在我的控制器，這個模塊，我使用require.js抓住了#products路線圖，並顯示與全球頁眉和頁腳作爲此佈局的區域的一部分降落。我還定義了一個內容區域，一旦id包含在路由中，這個區域就是我想要轉換的內容區域。那麼一旦這條新路線被擊中，我怎麼能在視圖上調用方法呢？當父路由被擊中時，我需要緩存應用程序的當前狀態，然後在子路徑被擊中時引用它嗎？當子路線被擊中並且父路線還沒有被用戶訪問時，我是否也需要初始化視圖？
路由器
define(['backbone', 'marionette', 'c_controllers/Controller'], function (Backbone, Marionette, Controller) {
'use strict';
var AppRouter = Backbone.Marionette.AppRouter.extend({
appRoutes : {
// PRODUCT ROUTES
'product' : 'product',
'product/:id' : 'showPlp'
}
});
return new AppRouter({'controller': Controller});
});
控制器
define(["backbone", 'marionette'], function (Backbone, Marionette) {
'use strict';
return {
product : function(id) {
require(['c_product/product',
'app_views/menu'], function(Product, Menu) {
APP.menu.show(new Menu());
APP.page.show(new Product());
});
}
};
});
查看
define([
'backbone', 'marionette', 'app_views/globalNav',
'c_product/productLanding', 'text!productNavTemplate', 'text!productBaseTemplate'], function(Backbone, Marionette, GlobalNav, ProductLanding, ProductNavTemplate, ProductBaseTemplate) {
var product = Backbone.Marionette.Layout.extend({
id : 'product',
template : _.template(ProductBaseTemplate),
regions : {
nav : '#globalNav',
content : '#view-content',
footer : '#footer'
},
events : {
},
initialize : function() {
},
onRender : function() {
// extend the nav view for the template that matches this flow
var Nav = GlobalNav.extend({ template : _.template(ProductNavTemplate)});
// show the nav, main content, and footer
this.nav.show(new Nav());
this.content.show(new ProductLanding());
}
});
return product;
});