Dojo Loader with Backbone and Marionette

EdwardRozum — Fri, 07 Feb 2014 14:14:28 GMT

Hey Everyone,

I have hit a road block when trying to use the Dojo Loader instead of require.js to build a backbone.marionette map application. I have looked through the forums, and used this (https://github.com/odoe/ags30sample) as an example. This issue I am running into seems to be the way the scripts are loading.

90% of the time, the app fails to start with the following error:
ReferenceError: Backbone is not defined
TypeError: Backbone.Marionette is undefined

The strange thing is, that sometimes the app does start. I can watch the http requests in fiddler, and they are being accessed in the correct order and loaded at the correct time. I was hoping you all could take a look, and explain if I am missing something. Any help would be greatly appreciated. I am new to modular and amd design, but have completed a few non map applications using require.js backbone and marionette

index.html
<script type="text/javascript" src="http://js.arcgis.com/3.8/"></script>
<script type='text/javascript' src='./Client/js/app_config.js'></script>

app_config.js
(function () {
    require({
        async: true,
        parseOnLoad: true,
        aliases: [["text", "dojo/text"]],
        packages: [
          {
              name: "jquery",
              location: location.pathname.replace(/\/[^/]+$/, "") + "/Client/js/vendor",
              main: "jquery"
          }, {
              name: "bootstrap",
              location: location.pathname.replace(/\/[^/]+$/, "") + "/Client/js/vendor",
              main: "bootstrap.min"
          }, {
              name: "underscore",
              location: location.pathname.replace(/\/[^/]+$/, "") + "/Client/js/vendor",
              main: "underscore"
          }, {
              name: "backbone",
              location: location.pathname.replace(/\/[^/]+$/, "") + "/Client/js/vendor",
              main: "backbone"
          }, {
              name: "marionette",
              location: location.pathname.replace(/\/[^/]+$/, "") + "/Client/js/vendor",
              main: "backbone.marionette"
          }, {
              name: "app",
              location: location.pathname.replace(/\/[^/]+$/, "") + "/Client/js"
          }
        ]
    });

    define.amd.jQuery = true;

    require(['jquery', 'app/app_main'], function ($, MapManager) {
        $(document).ready(function () {
            alert("here");
            MapManager.start();
        });
    });
}).call(this);

app_main.js
define(["jquery", "underscore", "backbone", "marionette"], function ($, _, Backbone, Marionette) {


    var MapManager = new Backbone.Marionette.Application();

    MapManager.addRegions({
        headerRegion: "#header-region",
        mainRegion: "#map-container",
    });

    //After the Main application has started, startup the application views
    MapManager.on("initialize:after", function () {
        console.log("Marionette App started");
    });

    return MapManager;
});

topic Dojo Loader with Backbone and Marionette in ArcGIS JavaScript Maps SDK Questions

Dojo Loader with Backbone and Marionette