Question

All my deps are being found and loaded, but my Application which is the mapApp.js file is never found and always gives me a Undefined when I try to use it.

What am I doing wrong ?

this is my folder hierarchic

Site
  |
  |- JS 
      |- Libs
      |    |- * All my deps *
      |
      |- mapApp.JS
      |
      .
      .
      .
      |- /models
      |- /views
      |- /collections

This is my Main.js file that initialize require.js

require.config({
  baseUrl: '/ctt-ct/js/'
  ,urlArgs: "ts=" +  (new Date()).getTime()

  ,paths: {
      'jquery': 'libs/jquery.min'
      ,'underscore': 'libs/underscore-min'
      ,'backbone': 'libs/backbone'
      ,'templates': '../templates'
  }

  ,shim: {
    jquery: {
      exports: '$'
    }
    ,underscore: {
      exports: '_'
    }
    ,backbone: {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    }
  }
});

require([
  'jquery'
  ,'underscore'
  ,'backbone'
  ,'mapApp'
],
function ($, _, Backbone, App) {
  $;                       // <- working
  _;                       // <- working
  Backbone.View;           // <- working
  var app = new App();     // <- NOT working !!!
});

mapApp.js

require([
  'jquery'
  ,'underscore'
  ,'backbone'
],
function ($, _, Backbone) {
    var App = Backbone.View.extend({

        el : $('#map_canvas')    
        ,initialize : function(){
                 // DO a lot of stuff and don't return anything.
        }

        ,drawData: function(){
                 // Do other stuff. 
        }
    });
});

Answer 1

You must return App from the function :

...
function ($, _, Backbone) {
    var App = Backbone.View.extend({

    });

    return App;
});

Usually, I don’t use it require like that, but I’m absolutely not sure of the correct way (the documentation is not very friendly). I would write often :

mapApp.js

define([
  'views/otherView' //Other BackboneView
],
function (OtherView) {
    var App = Backbone.View.extend({

        el : $('#map_canvas')    
        ,initialize : function(){
            // stuff ; not too much in a View
        }

        ,render : function(){
             var otherView =  new OtherView();
             ...
             return this;
        }
    });
    return App;
});

In that case, Backbone, Underscore and jQuery are global variables in the page. I think it make sense as you always need them.