我目前正在使用 Backbone.js Marionette 框架重写一个已经存在的应用程序。新堆栈应该是相当模块化的,以便可以很容易地添加新控制器。该应用程序有一个 node.js 后端,并为每个调用提供一个 json 响应。
该应用程序是使用(如前所述)Marionette 应用程序定义的:
PlugUI.js: var PlugUI = new Backbone.Marionette.Application();
PlugUI.addRegions({
// adminBarRegion: "#adminbar",
contentRegion: "#content"
});
PlugUI.bind("routing:started", function(options){
Backbone.history.start();
PlugUI.Navigation.showNavigation();
});
Backbone.Marionette.TemplateCache.prototype.loadTemplate = function(templateId, callback){
...
});
}
所以,我想,这是相当标准的。然后我确实提供了一个具有一些相当标准内容(即模型、视图和路由器方法)的“控制器”,如下所示:
PlugUI.module("Status", function(Status, PlugUI, Backbone, Marionette, $, _) {
// define the model
Status.Status = Backbone.Model.extend({
defaults: {
...
},
urlRoot: function() {
return '/api/status';
},
fetchStatus: function() {
var status = new Status.Status();
status.fetch({
success: function(data, response){
Status.showStatus(response);
}
})
}
});
Status.showStatus = function(model){
var status = new Status.Status(model);
var statusView = new Status.StatusView({
model: status
});
PlugUI.layout.main.show(statusView);
// add trigger, so that navbar is shown ;-)
PlugUI.vent.trigger("navbar:show", "status-icon");
}
Status.StatusView = Backbone.Marionette.ItemView.extend({
tagName: "div",
className: "one-third column statusbox",
template: "#status"
});
Status.Router = Backbone.Marionette.AppRouter.extend({
appRoutes: {
"status": "showUniqueStatus"
}
});
PlugUI.addInitializer(function(options){
Status.router = new Status.Router({
controller: PlugUI.Status
});
PlugUI.vent.trigger("routing:started");
})
})
只要我直接触发这个控制器的视图,这就会很好地工作。如果我在其中添加另一个具有相同内容的控制器并通过路由器触发 show 方法,那么基本上什么都不会发生。我现在在前端添加了一个事件,以在新控制器中显示视图,这确实有效,但我认为这些东西应该通过路由器工作。我理解错了吗?
有关完整(不工作)的源代码,请查看github 项目。
非常感谢任何帮助。