控制器上带有路由器的模块化 Backbone.js Marionette 应用程序 - 路由不起作用答案

【问题标题】：Modular Backbone.js Marionette application with router on controller - routes not working控制器上带有路由器的模块化 Backbone.js Marionette 应用程序 - 路由不起作用
【发布时间】：2012-07-23 17:16:53
【问题描述】：

我目前正在使用 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 方法，那么基本上什么都不会发生。我现在在前端添加了一个事件，以在新控制器中显示视图，这确实有效，但我认为这些东西应该通过路由器工作。我是不是理解错了？

有关完整（不工作）源代码，请查看the github project。

非常感谢任何帮助。

【问题讨论】：

标签： backbone.js marionette backbone-routing

【解决方案1】：

我不完全确定，但我认为问题在于您的初始化程序（假设您使用的是最新的 Backbone.Marionette 版本）：


PlugUI.addInitializer(function(options){
  Status.router = new Status.Router({
    controller: PlugUI.Status
  }); 

  PlugUI.vent.trigger("routing:started");    
})

改用Status.addInitializer


Status.addInitializer(function(options){
  Status.router = new Status.Router({
    controller: Status
  }); 

  PlugUI.vent.trigger("routing:started");    
})

【讨论】：

【解决方案2】：

很抱歉耽搁了很长时间，但是...

建议的解决方案（移动初始化程序）是解决方案的一部分。此外，我触发了事件“routing:started”，并且该事件触发了“Backbone.history.start();”。我已将此方法的调用移至“initialize:after”，现在一切正常。

PlugUI.bind("initialize:after", function(optionns) {
  console.log("initialize:after");
  Backbone.history.start();
});

【讨论】：

【解决方案3】：

我想这已经很晚了，但是尝试如下启动 Backbone 历史记录

PlugUI.on("before:start", function(options) {
   console.log("Starting history before start");
   Backbone.history.start();};

我在这上面浪费了足够多的时间。

PlugUI.on("start") 不起作用，但在 "before:start" 上会

【讨论】：