title: Backbone JS, Marionette and Require JS
body: <p>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:</p>
  
  <p>main.js</p>
  
  <pre><code>require(['application'], function(app){
  app.start();
  });
  </code></pre>
  
  <p>application.js</p>
  
  <pre><code>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;
  
  });
  </code></pre>
  
  <p>dashboard.js</p>
  
  <pre><code>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;
  });
  </code></pre>
  
  <p>I am receiving undefined in the console log? Should the application be using requirejs modules instead?</p>
  
  <p>EDIT: Update with require</p>
  
  <pre><code>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();
  });
  </code></pre>
  
  <p>router</p>
  
  <pre><code>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;
  
  });
  </code></pre>