0

我知道这个问题已经被做死了，但我还是不明白。我已经阅读了 StackOverFlow 自己的“this”关键字解释（以及其中的Mike West文章）以及其他与范围相关的问题。我不知道为什么我不明白，所以我向更精明的 JavaScript 开发人员寻求帮助。

从代码和注释来看，它应该是相当不言自明的。但它正在查询 ESRI 地图服务，返回图形并将其放置在地图上。

但问题出showResults在我调用的函数中this.graphics，即地图的图形属性（图形图层）。我知道它现在超出了范围（这比我想承认的要花更多的时间来弄清楚），但是我怎样才能把它放回范围内以便我可以使用它呢？即使我已经大幅更改了代码......

define([
"dojo/_base/declare",
"dojo/on",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dijit/form/Button",
"dijit/form/Form",
"dijit/form/FilteringSelect",
"dijit/form/ValidationTextBox",
"dojo/_base/array",
"dojo/_base/Color",
"dojo/_base/lang",
"esri/tasks/find",
"dojo/text!./Find/templates/Find.html"
], function(declare, on, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, Button, Form, FilteringSelect, ValidationTextBox, array, Color, lang, find, FindTemplate) {

//anonymous function to load CSS files required for this module
(function() {
    var css = [require.toUrl("gis/dijit/Find/css/Find.css")];
    var head = document.getElementsByTagName("head").item(0),
        link;
    for(var i = 0, il = css.length; i < il; i++) {
        link = document.createElement("link");
        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = css[i].toString();
        head.appendChild(link);
    }
}());

// Query Dijit
return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
    widgetsInTemplate: true,
    templateString: FindTemplate,
    graphics: null,
    findTask: null,
    findParams: null,
    results: [],
    serverError: null,
    queryLayer: null,
    searchText: null,
    postCreate: function() {
        // Method is used to call a superclass method. It's good practice to assume that you are overriding a method that may 
        // do something important in a class up the inheritance chain
        this.inherited(arguments);

        // Create graphics layer and add it to the map
        this.graphics = new esri.layers.GraphicsLayer({id:"queryGraphics"});
        this.map.addLayer(this.graphics);

        // Create find task with url to map service
        this.findTask = new esri.tasks.FindTask("arcgis/rest/services/MapServer");

        // Create find parameters and define known values
        this.findParams = new esri.tasks.FindParameters();     
        this.findParams.outSpatialReference = this.map.spatialReference;
        this.findParams.returnGeometry = true;
        this.findParams.layerIds = [1];
        this.findParams.searchFields = ["OBJECTID", "Gauge ID", "FV_ID", "FDC_ID", "Flood_Stage", "Flood_Line", "Municipality", "WATERSHED"]; 

        // Listen for Submit button click
        on(this.submitButton, 'click', lang.hitch(this, 'execute'));
    },
    // Submit button click event
    execute: function execute() {   
        // Set the WHERE search text
        this.findParams.searchText = dojo.byId("searchText").value;
        // Sends a request to the ArcGIS REST map service resource to perform a search based 
        // on the FindParameters specified in the findParameters argument. On completion, the 
        // onComplete event is fired and the optional callback function is invoked.
        this.findTask.execute(this.findParams, this.showResults, this.showError); 
    },
    // Fires when the find operation is complete and returns an array of FindResult
    showResults: function showResults(results) {
        this.graphics.clear();
        // Build an array of attribute information and add each found graphic to the map
        dojo.forEach(results, function(result) {
            var symbol;
            switch(result.feature.geometry.type) {
                case "point":
                    symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([255, 0, 0, 1.0]));
                    break;
                case "polyline":
                    symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1);
                    break;
                case "polygon":
                    symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.0]));
                    break;
                default:
                    symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([255, 0, 0, 1.0]));
            }
            var graphic = new esri.Graphic(result.feature.geometry, symbol);
            this.graphics.add(graphic);
        });
    },
    // Fires if the find execution fails to complete
    showError: function showError(serverError) {
        alert("The server encountered an error. Error: " + serverError);
    }
});
});

回答后更新：

所以，解决这个问题的不是一个答案，而是两个的结合。我合并了布法罗的回答 

this.findTask.execute(this.findParams, lang.hitch(this, this.showResults), this.showError);

和布法罗对克雷格的回答的评论

dojo.forEach(results, function(result) {  
...
}, this);

但克雷格的也可以在这里工作。这与泰米尔人的回答相结合，我敢肯定也会奏效。

因此，我将 Buffalo's 标记为答案，但所有三个都值得进一步阅读。

4

3 回答 3

1

您可以使用Function.bind（注意！并非所有浏览器都支持它）。

改变：

this.findTask.execute(this.findParams, this.showResults, this.showError);

至：

this.findTask.execute(this.findParams, this.showResults.bind(this), this.showError);

或者（如果您担心Function.bind浏览器支持）：

使用closure&Function.apply

execute: function execute() {  
...
...
  var self = this;
  this.findTask.execute(this.findParams, function() {
    self.showResults.apply(self, arguments);
  }, this.showError); 
}
于 2013-07-03T19:54:47.707 回答
1

您的问题在于以下代码

    dojo.forEach(results, function(result) {

        ...

        this.graphics.add(graphic);
    });

正在执行的函数没有小部件的范围。做了：

    dojo.forEach(results, lang.hitch(this, function(result) {

    }));
于 2013-07-03T20:13:59.720 回答
1

这里的hitch方法dojo/_base/lang将成为你最好的朋友。我假设该findTask函数所做的是执行一些异步请求，然后使用结果调用第二个参数。

首先，添加dojo/_base/lang到您的依赖项列表。

然后换行

this.findTask.execute(this.findParams, this.showResults, this.showError);

至

this.findTask.execute(this.findParams, lang.hitch(this,this.showResults), this.showError);

lang#hitch所做的是获取第一个参数（在本例中是您的小部件的实例），并使其成为第二个参数执行时的范围。在这种情况下，我们希望 showResults 在当前范围内执行。

于 2013-07-03T20:02:02.960 回答