Dojo

Question

我在 ESRI Web App Builder 中使用 dojo 时遇到过这样的情况，我需要运行一个 AJAX 调用并仍然从基础 class.下面是我的代码，其中包含注释，以准确解释成功的地方和失败的地方：

define(['dojo/_base/declare', 'jimu/BaseWidget', 'dojo/request', "esri/layers/WMSLayer", "esri/config", "dojo/domReady!"], function (declare, BaseWidget, request, WMSLayer, esriConfig) {

    return declare([BaseWidget], {
        baseClass: 'jimu-widget-mywidget',
        // This function is called by a button press (Normally the WMSLayer variable would be set by user input)
        addWms: function () {
            var wmsLayer = new WMSLayer("http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer", {
                format: "png",
                visibleLayers: [2]
            });

            this.map.addLayer(wmsLayer); // this.map is inherited from BaseWidget as far as I can see. This adds a wms to my map without error

            request("request.html").then(function(data){
                var wmsLayer = new WMSLayer("http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer", {
                    format: "png",
                    visibleLayers: [2]
                });

                this.map.addLayer(wmsLayer); // This is now in another context....I get the error HERE. 
                // At this point map is not defined because this anonymous function is running
                // in a different context. ( at least I think that's what is happening )
            }, function(err){
                // Hopefully there are no typos in my example XD
            });
        }
    });
});

我的问题是 --> 如何使用 "request" 的回调函数访问 "map" 变量？

我希望能够通过调用 WMS 服务的 GetCapabilities 运行 this.map.addLayers。该请求通常会调用它，我一直走到代码的末尾，直到我无法再访问 "map" 变量为止。

首选 Dojo 类型的答案，但普通的 javaScript 也可以。请避免 JQuery 个答案。

资源是：
ESRI JavaScript library
Dojo
ESRI Web App Builder

Answer 1

在您的请求回调中，this 不再引用您的 class。在回调中访问地图的一种简单方法是在 addWms 函数范围的变量中分配地图的引用，然后在回调中使用它：

addWms: function() {
    var map = this.map;
    // Your code here
    request('request.html').then(function (data) {
        // Your code here
        map.addLayer(wmsLayer); // Note that you're using map instead of this.map
    }
}

您还可以使用 Dojo 挂接函数，您可以在其中传递函数及其应用的上下文。我建议你看看这个 link http://dojotoolkit.org/reference-guide/1.10/dojo/_base/lang.html#hitch.

Answer 2

您运行遇到的问题是调用异步回调时丢失执行上下文的经典问题（因此 this 不再是您想要的）。一般有两种方法可以解决。

一种方法是在外部作用域中创建一个引用 this 的变量，以便内部函数可以访问它：

var self = this;
request('request.html').then(function (data) {
    // ...

    self.map.addLayer(wmsLayer);
});

另一种方法是使用上下文绑定，通过 Function#bind (ES5) 或 dojo/_base/lang.hitch:

// Function#bind:
request('request.html').then(function (data) {
    // ...

    this.map.addLayer(wmsLayer);
}.bind(this));

// lang.hitch:
request('request.html').then(lang.hitch(this, function (data) {
    // ...

    this.map.addLayer(wmsLayer);
}));

将异步处理程序函数分解为另一个内部实例方法的绑定方法也很常见：

_addRequestedLayer: function () {
    // ...

    this.map.addLayer(wmsLayer);
},

addWms: function () {
    // ...

    // ES5:
    request('request.html').then(this._addRequestedLayer.bind(this));
    // ...or lang.hitch, with late binding:
    request('request.html').then(lang.hitch(this, '_addRequestedLayer'));

还有一个tutorial on lang.hitch.

Dojo - Promise 无法访问变量

Dojo - Promise Can't Access Variables

javascript

esri

wms

arcgis-js-api