Marionettejs Routes

Question

I'm new to Marionette and I just can't get routes to work.

I'm using Marionette's 2.4.1 version, and trying to do it the simplest way possible so it'll just work.

This code works for old version of Marionette, v1.0.2, which was included in one of the yeoman's generator. I know there's a huge gap between those two versoins but for every post, blog, official documentation and even books written for this framework code stays the same.

There are no errors in console, but the 'home' method just won't start.

Am I missing something here?

application.js (Application body):

define(['backbone', 'marionette'],

function (Backbone, Marionette) {
    'use strict';

    var App = new Marionette.Application();


    App.Router = Marionette.AppRouter.extend({
        appRoutes: {
            "home": "home"   
        }
    });

    var myController = {
        "home": function() {
            console.log("This thing just won't work.");
        }
    };


    /* Add initializers here */
    App.addInitializer(function () {
        console.log('App initialized');

        new App.Router({
            controller: myController   
        });
    });


    App.on("initialize:after", function () {
        if (Backbone.history) {
            Backbone.history.start();
        }
    });

    return App;
});

main.js (Starts our app defined in application.js):

    require(['marionette', 'application'],

    function ( Marionette, App ) {
    'use strict';

    App.start();
    });

config.js (Config for require.js)

require.config({

    baseUrl: "/scripts",

    /* starting point for application */
    deps: ['marionette', 'main'],


    shim: {
        backbone: {
            deps: [
                'underscore',
                'jquery'
            ],
            exports: 'Backbone'
        },
        marionette: {
            deps: ['backbone'],
            exports: 'Marionette'
        }
    },


    paths: {
        backbone: '../bower_components/backbone/backbone',
        jquery: '../bower_components/jquery/dist/jquery',
        underscore: '../bower_components/underscore/underscore',


        /* alias all marionette libs */
        'marionette': '../bower_components/marionette/lib/core/backbone.marionette',
        'backbone.wreqr': '../bower_components/backbone.wreqr/lib/backbone.wreqr',
        'backbone.babysitter': '../bower_components/backbone.babysitter/lib/backbone.babysitter'
    }

});

score 0 · Answer 1 · answered May 14 '15 at 13:26

It looks like you're missing a reference to the router's controller.

Try updating the Router to include a reference to myController:

App.Router = Marionette.AppRouter.extend({
    controller: myController,
    appRoutes: {
        "home": "home"   
    }
});

See AppRouter docs for more infomation: http://marionettejs.com/docs/v2.4.1/marionette.approuter.html

score 0 · Accepted Answer · answered Jun 09 '15 at 07:07

It seems that initialize:after in:

App.on("initialize:after", function () {
    if (Backbone.history) {
        Backbone.history.start();
    }
});

isn't supported in newest versions of Marionette and I was supposed start instead:

App.on("start", function () {
    if (Backbone.history) {
        Backbone.history.start();
    }
});

Most posts about Marionette seems to be rather outdated. Those are still really helpful but be sure to verify it with the official framework's documentation.

I should've done that in the first place..

Marionettejs Routes

2 Answers2