我有以下情况:
app.js: Singleton Marionette.Application(),我在其中定义了导航、页脚和主区域。在初始化程序中,我构造 Marionette.Contoller 并将它们附加到应用程序的 this.controller 对象以供以后控制。我可能不会在这里构建所有控制器,只是我想急切加载的那些。有些是稍后延迟加载的。我还在这里实例化一个 Backbone.Router,并传入对我的应用程序对象的引用:
var theApp = new TP.Application();
theApp.addRegions(
{
navRegion: "#navigation",
mainRegion: "#main",
footerRegoin: "#footer"
});
theApp.addInitializer(function()
{
// Set up controllers container and eagerly load all the required Controllers.
this.controllers = {};
this.controllers.navigationController = new NavigationController({ app: this });
this.controllers.loginController = new LoginController({ app: this });
this.controllers.calendarController = new CalendarController({ app: this });
this.router = new Router({ app: this });
});
* *Controller.js:这是一个处理视图和模型实例化和事件的通用控制器。每个 Controller 拥有自己的 Marionette.Layout,将填充到 App.mainRegion 中。每个控制器都绑定到布局的“显示”事件以使用自定义视图填充布局的区域。每个控制器都提供了一个 getLayout() 接口,该接口返回控制器的关联布局。
Marionette.Controller.extend(
{
getLayout: function() { return this.layout; },
initialize: function()
{
this.views.myView = new MyView();
...
this.layout.on("show", this.show, this);
...
},
show: function()
{
this.layout.myViewRegion.show(myView);
}
});
router.js:路由器使用应用程序单例将控制器的布局加载到应用程序的主区域:
...
routes:
{
"home": "home",
"login": "login",
"calendar": "calendar",
"": "calendar"
},
home: function ()
{
var lazyloadedController = new LazyLoadController();
this.theApp.mainRegion.show(lazyLoadController.getLayout());
},
login: function (origin)
{
this.theApp.mainRegion.show(this.theApp.controllers.loginController.layout);
}
实际上,除了重新加载相同的布局/控制器两次之外,一切正常。发生的情况是 LoginView 中定义的 DOM 事件不会在第二次显示时重新绑定。这很容易通过将 LoginView 初始化代码移动到该控制器的“show”事件处理程序中来解决:
LoginController = Marionette.Controller.extend(
{
...
show: function()
{
if (this.views.loginView)
delete this.views.loginView.close();
this.views.loginView = new LoginView({ model: this.theApp.session });
this.views.loginView.on("login:success", function()
{
});
this.layout.mainRegion.show(this.views.loginView);
}
现在一切正常,但它消除了我创建控制器的部分原因:我希望他们拥有一个视图及其模型,创建一次,而不必在每次切换布局时销毁和重新创建它们。
我错过了什么吗?这不是我应该如何使用布局吗?布局和区域的重点不是我可以随意切换视图吗?
显然我不会经常跳回 LoginController/Layout,但是在 HomeController/Layout、CalendarController/Layout、SummaryController/Layout 等之间呢?在单页应用程序中,我可能会在这些“顶级”布局之间切换相当频繁,我希望视图保持在后台缓存。