CODEWITHSUNDEEP
backbone.jsmarionettebrowserify
David Fusilier
David Fusilier

Reputation: 301

Marionette router not triggering controller method on route

I'm trying to upgrade an application from Marionette 1.* > 2.4.2. The biggest part of this change is shifting away from Marionette modules to using Browserify/Watchify with CommonJS style modules.

I've hit a roadblock while trying to get a Router/Controller up and running. No error is thrown, but for some reason my routes arent triggering my controller methods.

doc_router.js:

var $ = require('jquery')
    , _ = require("underscore")
    , Backbone = require("backbone")
    , Marionette = require("backbone.marionette")
    , App = require("../../app.js")

var Router = Marionette.AppRouter.extend({

    appRoutes: {
        "docs": "listDocs"
    }
});

// Map to controllers

var API = {

    listDocs: function () {
        console.log("listDocs") // Doesnt log to console
        App.DocApp.List.Controller.listDocs();
    }
};

// Update the URL when a controller event
// that requires it is triggered, then call
// appropriate controller via API.

App.on("docs:list", function () {
    App.navigate("docs");
    API.listDocs();
});


// Initialize router when app starts

App.on("before:start", function () {
    console.log("History started? ", Backbone.History.started);
    console.log("Initializing router...")
    new Router({
        controller: API
    });
});

module.exports = Router;

app.js:

var $ = require('jquery')
    , _ = require("underscore")
    , Backbone = require("backbone")
    , Marionette = require("backbone.marionette")


var App = new Marionette.Application();

App.addRegions({ 
    mainRegion  : "#main-region",
    modalRegion : "#modal-region"
});

App.on("start", function () {
    if (Backbone.history) {
        console.log("Application starting...");
        var fetchingCurrentUser = App.request("entities:current-user");

        $.when(fetchingCurrentUser).done(function (current_user) {
            App.currentUser = current_user;
            console.log("Starting history...");
            Backbone.history.start();

            console.log("History started? ", Backbone.History.started);
        }); 
    }
});

module.exports = App

main.js:

var _ = require('underscore');
var App = require('./app.js');

App.Entities = _.extend({}, 
    require("./entities/doc.js"), 
    require("./entities/user.js")
);

// DocsApp
App.DocsApp = {
    "Router": require("./apps/doc/doc_router.js"),
    "Reader": {
        "Controller": require("./apps/doc/reader/doc-reader_controller.js"),
        "Views": require("./apps/doc/reader/doc-reader_views.js")
    },
    "List": {
        "Controller": require("./apps/doc/list/doc-list_controller.js"),
        "Views": require("./apps/doc/list/doc-list_views.js")
    }
};

App.start();

Judging by my console logs it doesn't seem like I'm starting Backbone.history before creating the router. Really pulling my hair out on this one... Any help is appreciated.

Edit

Using Backbone.Router appears to work (below). Why isn't Marionette.AppRouter working?

var Router = Backbone.Router.extend({

    routes: {
        "": "listDocs",
        "docs": "listDocs",
        "docs/:doc_id" : "readDoc",
        "docs/:doc_id/edit" : "editDoc"
    },

    listDocs: function () {
        console.log("listDocs") // Logs to console
        // App.DocApp.List.Controller.listDocs();
    }
});

Upvotes: 2

Views: 688

Answers (2)

David Fusilier
David Fusilier

Reputation: 301

Ended up switching to backbone.base-router, which allowed me to specify a controller since the Marionette AppRouter apparently has issues with Browserify.

Upvotes: 1

ToJa92
ToJa92

Reputation: 441

Marionette extends Backbone's built-in router, so if you want router.navigate to trigger the route function, you'll have to pass the option trigger like this:

router.navigate('docs', {trigger: true});

Upvotes: 1

Related Questions