Search code examples
javascriptbackbone.jsmarionettebackbone-routing

Marionettejs Routes


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'
    }

});

Solution

  • 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..