我發現使用的骨幹路由器設置,其中通過在URL中圖示像這樣的網頁路徑:
routes: {
'*page' : 'page'
}
page: function (page) {
customEvent.trigger('router:changed:page', page);
}
這樣,你是射擊的事件說的網頁已更改,將作爲掛鉤爲其他視圖進行渲染和初始化。然後,您可以創建一個頁面模塊初始化正確的觀點,像這樣:
define(['backbone'], function (Backbone) {
var PageModule = Backbone.View.extend({
el: $('#main'), // main container
initialize: function() {
this.listenTo(customEvent, 'router:changed:page', this.render);
},
render: function (page) {
this.$el.empty(); // empty the view each time
switch(page) {
case 'dashboard':
// load dashboard view
break;
case 'other':
// load other view
break;
}
return this;
}
});
});
每個視圖然後加載可能需要的所有模板和子視圖像這樣。
define(['backbone', 'insertTemplate', 'collection'], function (Backbone, InsertTemplate, Collection) {
var DashboardView = Backbone.View.extend({
// do your view magic in here but as you can see you have access to a template and collection but you could add as many items as required.
});
return DashboardView;
});
頁面模塊成爲一種工廠方法。
我建議看看像木偶或佈局管理器的框架,因爲它可以幫助很多。
這是一個粗略的例子,應該讓你思考。還有其他一些方法,但這是一個開始。