Search code examples
backbone.jsroutesrequirejsmarionette

Marionette / Backbone routing and controllers with require.js


Could someone please explain/provide an example how to get this routing thingy to work in Marionette.

I would like to get console.log("stuff") after navigating to /#test. This is what I have so far and it does absolutely nothing (no errors though...):

main.js:

requirejs.config({
  baseUrl: '/',
  paths: {
    'text': '../vendor/javascripts/requirejs-text/text',
    'backbone': '../vendor/javascripts/backbone/backbone',
    'backbone.wreqr': '../vendor/javascripts/backbone.wreqr/backbone.wreqr',
    'backbone.babysitter': '../vendor/javascripts/backbone.babysitter/backbone.babysitter',
    'jquery': '../vendor/javascripts/jquery/jquery',
    'jquery-ui': '../vendor/javascripts/jquery-ui/jquery-ui',
    'json2': '../vendor/javascripts/json2/json2',
    'marionette': '../vendor/javascripts/marionette/backbone.marionette',
    'underscore': '../vendor/javascripts/underscore/underscore',
    'handlebars': '../vendor/javascripts/handlebars/handlebars'
  },
  shim: {
    'underscore': {
      exports: '_'
    },
    'backbone': {
      deps: ['jquery', 'underscore', 'json2'],
      exports: 'Backbone'
    },
    'marionette': {
      deps: ['backbone'],
      exports: 'Marionette'
    },
    'jquery-ui': {
      deps: ['jquery']
    },
    'handlebars': {
      exports: 'Handlebars'
    }
  }
});

define(["app"], function(App) {
  return App.start();
});

app.js:

define(['underscore', 'jquery', 'backbone', 'marionette', 'view', 'router'], function(_, $, Backbone, Marionette, View, Router) {
  var App;
  App = new Backbone.Marionette.Application();
  App.on("initialize:after", function() {
    var router, view;
    view = new View();
    return router = new Router();
  });
  return App;
});

router.js:

define(["marionette", "controller"], function(Marionette, Controller) {
  var AppRouter;
  AppRouter = Backbone.Marionette.AppRouter.extend({
    controller: Controller,
    appRoutes: {
      'test': 'testStuff'
    },
    initialize: function() {
      return console.log('router init');
    }
  });
  return AppRouter;
});

controller.js:

define ["marionette"], (Marionette) ->

    Controller = Marionette.Controller.extend
        initialize: ->
            console.log 'controller initialized'

        testStuff: ->
            alert 'stuff'


    # create an instance
    Controller = new Controller()

Solution

  • So this thing got solved:

    Needed to add

    if (Backbone.history) { 
      Backbone.history.start();
    }
    

    after initializing the router