使用骨干路由器监听 URL 更改事件。为每个视图设置路由,然后让路由器调用布局以更改它显示的视图以响应每个路由。用户可以多次单击后退或前进,应用程序会做出相应的响应并显示正确的视图。您的路由器可能如下所示:
var Router = Backbone.router.extend({
routes: {
'my/route/itemViewA': 'showItemViewA',
'my/route/itemViewB': 'showItemViewB'
},
showItemViewA: function () {
layout.showItemView('a');
},
showItemViewB: function () {
layout.showItemView('b');
}
});
您的布局可能如下所示:
var Layout = Backbone.Marionette.Layout.extend({
regions: {
someRegion: 'my-region-jquery-selector'
},
initialize: function () {
this.createViews();
},
createViews: function () {
this.views = {
a: new Backbone.Marionette.ItemView,
b: new Backbone.Marionette.ItemView
};
},
showItemView: function (view) {
this.someRegion.show(this.views[view]);
// You might want to do some other stuff here
// such as call delegateEvents to keep listening
// to models or collections etc. The current view
// will be closed but it won't be garbage collected
// as it's attached to this layout.
}
});
路由器和布局之间的通信方法不必是直接调用。您可以触发更多应用程序范围的事件或做任何您能想到的事情。上面的路由器非常基本,但可以完成工作。您可以创建一个更智能的路由器来使用带有参数的单个路由来动态确定要显示的 itemView。
每次用户执行需要更改视图的操作时,您都可以使用router.navigate('my/route/itemViewB', {trigger: true});
. 此外,如果您将应用程序设置为仅在历史更改事件上呈现,那么您无需设置两种机制来呈现每个视图。
我在自己的应用程序中使用了这种模式,并且效果很好。