Dojo AMD module changes reference of "this" - dojo

Question

I'm really confused as to some behavior I'm seeing in trying to learn the AMD style of Dojo. When I instantiate my module/object, "this" refers to the object in my constructor. I make a call to an internal function, and "this" inside that internal function refers to the Window object. So when I get to this.attachMapEventHandlers I get a "Object [object global] has no method 'attachMapEventHandlers'" error. What am I doing wrong? UPDATE: I found lang.hitch, which seems to indicate that the async nature is what's tripping me up, but I'm confused on how to implement a solution.
my script inside index.html:
require(["javascript/layout", "dijit/layout/ContentPane", "dijit/layout/BorderContainer", "dijit/layout/AccordionContainer",
"dojo/dom", "dojo/dom-attr", "dijit/Toolbar", "dijit/form/Button", "dijit/Dialog","dijit/ProgressBar", "dojo/domReady!"],
function (layout, dom, domAttr) {
mapControl = new layout();
layout.js:
define(["dojo/_base/declare"], function(declare) {
return declare(null, {
action:"pan",
activeMeasureTool:"",
aerialLayer:"",
legendLayers:"",
loadedServices:"",
popup:"",
resizeId:0,
constructor: function() {
this.init();
},
init: function() {
require(["esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"],
function(Map, config, SpatialReference, Extent) {
//custom map requires a proxy to function properly.
esri.config.defaults.io.proxyUrl = "../sdc_devdata/proxy.php";
var spatRef = new SpatialReference(2276);
var startExtent = new Extent(2481416.32087491, 6963246.42495962, 2501196.36936991, 6980267.92469462, spatRef);
var appFullExtent = new Extent(2396699.46935379, 6872369.60195443, 2607745.94404633, 7107335.22319087, spatRef);
map = new Map("map", {extent: startExtent, isZoomSlider:true, logo:false, sliderStyle:"large"});
this.attachMapEventHandlers();
this.createLayers();
this.handleLayerVisibilityChange();
});
},

Answer 1

There are a couple of things that you could do to resolve this.
Firstly, you could add your required dependency to the define array so you don't need to do an asynchronous require within the constructor of the class.
That would look like:
define(["dojo/_base/declare", "esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"], function (declare, Map, config, SpatialReference, Extent) {
return declare(null, {
action: "pan",
activeMeasureTool: "",
aerialLayer: "",
legendLayers: "",
loadedServices: "",
popup: "",
resizeId: 0,
constructor: function () {
this.init();
},
init: function () {
//custom map requires a proxy to function properly.
esri.config.defaults.io.proxyUrl = "../sdc_devdata/proxy.php";
var spatRef = new SpatialReference(2276);
var startExtent = new Extent(2481416.32087491, 6963246.42495962, 2501196.36936991, 6980267.92469462, spatRef);
var appFullExtent = new Extent(2396699.46935379, 6872369.60195443, 2607745.94404633, 7107335.22319087, spatRef);
map = new Map("map", {
extent: startExtent,
isZoomSlider: true,
logo: false,
sliderStyle: "large"
});
this.attachMapEventHandlers();
this.createLayers();
this.handleLayerVisibilityChange();
}
});
});
OR you could save the current scope of this to something in the closure when doing the require
init: function () {
var that = this;
require(["esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"],
function (Map, config, SpatialReference, Extent) {
//custom map requires a proxy to function properly.
esri.config.defaults.io.proxyUrl = "../sdc_devdata/proxy.php";
var spatRef = new SpatialReference(2276);
var startExtent = new Extent(2481416.32087491, 6963246.42495962, 2501196.36936991, 6980267.92469462, spatRef);
var appFullExtent = new Extent(2396699.46935379, 6872369.60195443, 2607745.94404633, 7107335.22319087, spatRef);
map = new Map("map", {
extent: startExtent,
isZoomSlider: true,
logo: false,
sliderStyle: "large"
});
that.attachMapEventHandlers();
that.createLayers();
that.handleLayerVisibilityChange();
});
},
EDIT: your third option would be using lang.hitch, which lets you specify the scope of this in the the callback function. To use it, you would add dojo/_base/lang to you define() dependency list, and wrap the require callback in lang.hitch(this, function(){});
define(["dojo/_base/declare", "dojo/_base/lang"], function (declare, lang) {
return declare(null, {
//...
init: function () {
require(["esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"],
lang.hitch(this, function (Map, config, SpatialReference, Extent) {
//this now refers to the instance of the class
}));
}
});
});
I would strongly suggest going with the first option, since it is consistent with the entire use of AMD (declaring what dependencies a module needs before it executes, rather than loading it on the fly).

Answer 2

You can put 'this' in another variable, like _this, and use _this in your internal function,like
init: function() {
var _this= this;
require(["esri/map", "esri/config", "esri/SpatialReference", "esri/geometry/Extent"],
function(Map, config, SpatialReference, Extent) {
...
_this.attachMapEventHandlers();
_this.createLayers();
_this.handleLayerVisibilityChange();