Backbone JS, Marionette and Require JS

Question

I am trying to get to grips with Backbone and Require JS using marionette for some of its excellent features. However I am finding a few issues with the app being available to views:

main.js

require(['application'], function(app){
app.start();
});

application.js

define([
'marionette',
'router'
], function(marionette, Router){

"use strict";

var app = new marionette.Application();

app.addRegions({
    header : 'header',
    main   : '#main'
});

app.addInitializer(function(){
    this.router = new Router();
});

return app;

});

dashboard.js

define([
'application',
'underscore',
'backbone', 
], function(app, _, Backbone) {
var DashboardView = Backbone.View.extend({

initialize: function() {
    console.log(app);
    $('a').click(function(e){
        e.preventDefault();
        app.router.navigate("claims", {
           trigger: true 
        });
    });
},

});
return DashboardView;
});

I am receiving undefined in the console log? Should the application be using requirejs modules instead?

EDIT: Update with require

require.config({

paths: {
    'jquery'        : '../vendors/jquery-1.8.2',
    'underscore'    : '../vendors/underscore',
    'text'          : '../vendors/text',
    'json2'         : '../vendors/json2',
    'backbone'      : '../vendors/backbone',
    'marionette'    : '../vendors/plugins/backbone.marionette',
    'paginator'     : '../vendors/plugins/backbone.paginator',
    'relational'    : '../vendors/plugins/backbone.relational',
    'moment'        : '../vendors/moment',
    'bootstrap'     : '../vendors/bootstrap',
    'datepicker'    : '../vendors/plugins/bootstrap.datepicker',
    'templates'     : 'templates/'
},

shim: {

    backbone: {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    },
    marionette : {
        exports : 'Backbone.Marionette',
        deps : ['backbone']
    },
    paginator: {
        deps: [
        'backbone',
        'underscore',
        'jquery'
        ],
        exports: 'Backbone.Paginator'
    },
    relational: ['backbone'],
    underscore: {
        'exports': '_'
    },
    bootstrap: {
        deps: ['jquery'],
        exports: "bootstrap"
    },
    datepicker: {
        deps: ['jquery','bootstrap'],
        exports: "datepicker"
    },
    moment: {
        exports: 'moment'
    }
}

});

require(['application'], function(app){
    app.start();
});

router

define([
  'views/claims/PaginatedList',
  'views/dashboard/Dashboard'
  ], function(PaginatedClaimListView, DashboardView){

var Router = Backbone.Router.extend({

    routes: {

        "": "index",
        "claims": "claims"

    },

    initialize: function(){
        Backbone.history.start({
            pushState: true,
            root: '/app_dev.php/hera'
        });
    },

    index: function(){
        var dashboard = new DashboardView();
    },

    claims: function(){
        var claimListView = new PaginatedClaimListView();
    }

});

return Router;

});

How did you configure require.js? Can you report your shim and paths configs? — Ingro
@Ingro I have added this in my original question now, thanks. — Hard-Boiled Wonderland
Well I don't see anything strange, I'm using a similar setup (I just don't proxy marionette and use the full syntax when i need it, like 'new Backbone.Marionette.Application()') and everything works fine. How did you call dashboard.js? It's app defined inside your main function? What's inside 'vent'? — Ingro
I removed vent and I have added the Router so you can see how Dashboard is called. App is defined at the bottom of main.js I have updated so it is clearer. (Bottom of require js) — Hard-Boiled Wonderland

Ingro Ingro · Accepted Answer · 2012-12-16T12:54:07

I think I've figured it out, even if I'm not 100% sure why.

The problem lies in your Router definition. Putting there your views with a reference to Application makes the router start before app.start() is called in main.js. In fact if you put a console.log(app) in your main.js you'll notice that it gets called after the one in dashboard.js.

So here's how I've resolved it:

define(['backbone'], function(Backbone){

var Router = Backbone.Router.extend({

    routes: {
        "": "index",
        "claims": "claims"
    },

    initialize: function(){
        Backbone.history.start({
            pushState: true,
            root: '/app_dev.php/hera'
        });
    },

    index: function(){
        require(['views/dashboard/Dashboard'],function(DashboardView){
            var dashboard = new DashboardView();
        });
    },

    claims: function(){
        require(['views/claims/PaginatedList'],function(PaginatedClaimListView){
             var claimListView = new PaginatedClaimListView();
        });
    }

});

return Router;

});

I'm not sure if there's a better solution that keeps your views defined in your router, anyway this works and will make your router lighter, especially if your views grown in number...

Backbone JS, Marionette and Require JS

3 Answers