Unable to load 3.1 version using Require.js

[YinShi]

The following code works fine with the 2.7 version but does not work with 3.1 version. When I ran with the 3.1 version, the javascript API throws an error from dojoLoader and consequently not loading dojo. How should I load the 3.1 version using require.js?


[ATTACH=CONFIG]17332[/ATTACH]

define([
  'jQuery',
  'Underscore',
  'Backbone',
  'http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1'
], function($, _, Backbone){
dojo.require("esri.map");

  var MapView = Backbone.View.extend({

initialize: function () {

  _.bindAll (this, 'render');
 
  var initExtent = new esri.geometry.Extent({"xmin":320000,"ymin":5000000,"xmax":400000,"ymax":5070000,"spatialReference":{"wkid":32189}});
  window.map = new esri.Map("mapDiv", {extent:initExtent});
  this.serviceCollection = this.collection;
  this.serviceCollection.bind ('reset', this.render);
  window.services.bind ('select', this.toggleLayer);
}
})

[ReneRubalcava · Accepted solution]

With the move to Dojo 1.7, there really is no longer a need to use Require.js to handle your module loading. You can take full advantage of the dojo define and require loaders.

I put up a posting here explaining my zero-day move from AGS JS API 2.8 to 3.0 and moving from Require.js to full Dojo.
http://odoe.net/blog/?p=307

[YinShi]

Hi there,

Thanks a lot for your help. I was able to get my application working with your blog. However, I had to do some hacking, not sure if it's caused by the IIS (5.1). Bascially, the callback arguments have their values reassigned to '3' for some reason. However, if were to interrogate this.argument, i.e. this._, it gave the correct value. So I hacked the code by assigning this._ back to _. Have you ever come across this problem?  It would be nice to understand what's going on with the callback arguements.

Thanks,
yin

define(['jquery', 'underscore', 'backbone', 'views/tocServiceView', 'collections/layers', 'models/layer'], function($, _, Backbone, TOCServiceView, Layers, Layer){
  _ = this._;
  $ = this.$;
 
  var TOCView = this.Backbone.View.extend({
template: _.template(this.$("#toc-template").html()),

initialize: function () {
  _.bindAll (this, 'render');
  this.render();
},

render: function(){
  $("#mapTOC").empty ();
  var currentView = this;
  this.collection.each (function (service) {
   //Insert Service Name
   $("#mapTOC").append (currentView.template(service.toJSON()));
   //Create a Layers collection for each service
   var layers = new Layers ();
   //Convert from layer array to Layer type
   _.each (service.get ("Layers"), function (layer) {
    var convertedLayer = new Layer (layer);
    layers.add  (convertedLayer);
   }); 
   //Create a TOCServiceView for each service
   var tocServiceView = new TOCServiceView({
    collection: layers
    });


  });
  return this;
}
  });
 
  //Return MapView as a type
  return TOCView;
});

[ReneRubalcava]

I had that problem, but only with jQuery. It occured before I figured out you need to use

define.amd.jQuery = true

I notice you're also using backbone.js.
In order to use to use Backbone.js with AGS 3.x/Dojo 1.7 (and really to use it in Require.js without a custom Loader class with .noConflict statements) is to amdify them.

Check out these amd friendly repos for backbone and underscore.
https://github.com/amdjs/backbone
https://github.com/amdjs/underscore

They basically use a tool like volo/amdify to wrap the libraries in define module statements.

That may be a cause of your issue as well. Take note that the amdify'd libraries are going to look for lower case define/requrie statements of 'jquery', 'underscore', 'backbone'.

Since you are looking into these libraries as well, you may want to check out a drop-in replacement for underscore called lodash which is optimized to perform faster than underscore. I was a little hesitant about it at firstm, but once you run the included benchmark, the results are pretty impressive.