Question

I’m doing some work converting a legacy project that uses Google Maps API v2 to v3.

There’s a Dojo class that looks like this:

dojo.declare
(
    "MyNamespace.MapControl",
    null,
    {
        constructor: function() {
            var mapElement = document.getElementById("map");
            this._map = new google.maps.Map(mapElement, {});
            google.maps.event.addListenerOnce(this._map, "idle", this.map_load);
        },

        map_load: function() {
            this.onLoad();
        },

        onLoad: function () { }
    }
);

The issue is that, when the map_load function is called, the context of this is the Google Map rather than the class.

I tried creating a local variable self within the class and using

_self = this;

inside the constructor but the variable doesn’t have the onLoad function. This is the code using that:

dojo.declare
(
    "MyNamespace.MapControl",
    null,
    {
        _self: null,      

        constructor: function() {
            var mapElement = document.getElementById("map");
            this._map = new google.maps.Map(mapElement, {});
            google.maps.event.addListenerOnce(this._map, "idle", this.map_load);

            _self = this;
        },

        map_load: function() {
            _self.onLoad(); // fails as onLoad is undefined
        },

        onLoad: function () { }
    }
);

Is there a way within Dojo to be able to get a reference to the parent class within the *map_load* function or is there an alternate way of hooking this up?

Answer 1

Use dojo.hitch(/*Object*/ scope, /*Function|String*/ method):

google.maps.event.addListenerOnce(this._map, "idle", dojo.hitch(this, "map_load"));

For more information see http://livedocs.dojotoolkit.org/dojo/_base/lang#hitch