CODEWITHSUNDEEP
backbone.jsmarionettebackbone-routing
triplem
triplem

Reputation: 1334

Modular Backbone.js Marionette application with router on controller - routes not working

I am currently rewriting an already existing application using the Backbone.js Marionette framework. The new stack should be fairly modular, so that new controllers could be added quite easily. The application has a node.js backend and provides a json response for each call.

The application is defined using (like already stated) an Marionette application:

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){
  ...
});
}

So, I guess, this is fairly standard. Then I do provide a "controller" with some fairly standard content (meaning the model, the view and the router methods), like so:

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");    
})
})

This works quite nicely, as long as I trigger the view of this one controller directly. If I add another controller with sort of the same stuff in there and trigger the show method via the router, then basically nothing happens. I have now added an event in the frontend, to show the view in the new controller, and this does work, but I thought that the stuff should be working via the router. Did I understood something wrong?

For the full (not working) source code, take a look at the github project.

Any help is really appreciated.

Upvotes: 1

Views: 2697

Answers (3)

Northstar11
Northstar11

Reputation: 21

I suppose this is coming pretty late, but try starting Backbone history as follows

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

I wasted enough time on this.

PlugUI.on("start") wouldnt work, but on "before:start" would

Upvotes: 0

triplem
triplem

Reputation: 1334

Sorry for really really long delay, but ...

The suggested solution (moving the initializers) is part of the solution. Furthermore I triggered the event "routing:started", and this event fired "Backbone.history.start();". I have moved the call to this method to "initialize:after", now everything works perfect.

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

Upvotes: 2

Derick Bailey
Derick Bailey

Reputation: 72858

I'm not entirely sure, but I think The problem is your initializer (assuming you are using the latest Backbone.Marionette version):


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

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

Try Status.addInitializer instead


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

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

Upvotes: 2

Related Questions