我想创建多级动态路由,如:-
http://localhost:4300/home/somename/somename/somename..... and so on based on dynamic inner pages
我的根配置如下:-
liveORCKlass.routers.Router = Backbone.Router.extend({
routes: {
'': 'home',
'home': 'home',
'home?files=:foo': 'home',
},
initialize: function () {
},
home: function () {
}
});
如何定义动态多级内页的根,请提前帮助我,谢谢。
尝试类似的路由器。如果需要,我们可以使用requires,只加载需要渲染的页面。您只需要遵循URL模式,如#pageId/param1=value1;param2=value2;param3=value3。这允许您添加更多参数并扩展应用程序。你还可以观察到,只有当pageId改变时,页面才会重新呈现,否则它只是更新页面模型的属性,你可以在页面视图中侦听和处理它们。
var pageRootEl = $('.page-container');
var currentPage ;
var currentPageId = defaultPage;
var defaultPage = 'page1';
var paramsToObject = function(params) {
if (!params) {
return {};
}
var paramsArray = _.map(params.split(';'), function(str) {
return str.split('=');
});
var obj = {};
_.each(paramsArray, function(arr) {
obj[arr[0]] = arr[1];
});
return obj;
};
var Router = Backbone.Router.extend({
routes: {
':pageId': 'renderPage',
':pageId/*params': 'renderPage',
'':'renderDefaultPage',
},
renderPage: function (pageId, params) {
var paramsObject = paramsToObject(params);
if(currentPageId === pageId && currentPage){
currentPage.model.set(paramsObject);
return;
}
if(currentPage){
currentPage.remove();
}
pageRootEl.empty();
switch (pageId) {
case 'page1':
$.getScript('pages/' + pageId + ".js", function () {
currentPage = new Page1.View({
});
currentPage.render().$el.appendTo(pageRootEl);
})
break;
case 'page2':
$.getScript('pages/' + pageId + ".js", function () {
currentPage = new Page2.View({
});
currentPage.render().$el.appendTo(pageRootEl);
})
break;
case 'page3':
$.getScript('pages/' + pageId + ".js", function () {
currentPage = new Page3.View({
});
currentPage.render().$el.appendTo(pageRootEl);
})
break;
}
},
renderDefaultPage: function(){
this.renderPage(defaultPage);
}
})
var router = new Router();
Backbone.history.start({
root: this.root
});