1

私は arcgis Javascript Api 3.7 (dojo 1.9.1 を含む) を使用しており、2 つの filteringSelect コントロールを持つカスタム テンプレート化された dijit を開発しています。ユーザーは、その特定の瞬間にデータ ストアを設定する最初の項目から 1 つの項目を選択します。この 2 番目の filteringSelect は毎回正しく入力されますが、関数ハンドラーが起動されないため、onchange イベントで何かが発生します。2 番目の FilterinSelect の onchange イベントで他のスタッフを実行する必要があります。

2番目のfilteringSelectで何かが台無しになっているようです（ハンドラーコンテキストで何かを推測しています）が、まだわかりません。

私の 2 つのフィルタリング コントロール テンプレート宣言 (私の dijit html テンプレートの一部:

                <tr>
                <td>
                    Capa:
                </td>
                <td>
                    <input data-dojo-type="dijit.form.ComboBox" name="layerDijit" id="layerDijit"
                           data-dojo-props="autoComplete:true, required:true, searchAttr:'name', style:'width:100%;'"
                           data-dojo-attach-point="layerDijit" data-dojo-attach-event="change:_handleLayerSelected"/>
                </td>
            </tr>
            <tr>
                <td>
                    Campo:
                </td>
                <td>
                    <input data-dojo-type="dijit.form.FilteringSelect" name="fieldDijit" id="fieldDijit"
                           data-dojo-props="autoComplete:true, required:true, searchAttr:'name', style:'width:100%;'"
                           data-dojo-attach-point="fieldDijit" data-dojo-attach-event="change:_handleFieldSelected"/>
                </td>
            </tr>

Dijit JS スクリプト:

最初の Filtering Select を設定するコード

postCreate: function() {
        this.inherited(arguments);

        ....

        this.rootMapLayer = this.map.getLayer("ELAPAS");
        if (this.rootMapLayer.loaded){
            this.listLayers(this.rootMapLayer);
        }
        else{
            this.rootMapLayer.on("load", lang.hitch(this, this.listLayers));
        }

        //enlace de eventos (tested this, and it doesn't work for the second filtering select either)
        //this.fieldDijit.on('change', lang.hitch(this, this._handleFieldSelected));
        //this.layerDijit.on('change', lang.hitch(this, this._handleLayerSelected));
    },

listLayers: function() {

        var layerInfos = [];

        layerInfos = array.filter(this.rootMapLayer.layerInfos,function(info,index){
            return info.subLayerIds === null;
        });

        if(layerInfos.length === 0) {
            console.error("No se encontro ninguna capa para el servicio de mapa seleccionado");
            return;
        }

        var layersStore = new Memory({
            data: layerInfos
        });

        this.layerDijit.set('store', layersStore);
    },

layerDijit と呼ばれる最初の filteringSelect で選択の変更を処理し、2 番目のもの (FieldDijit) のデータをロードするコード:

_handleLayerSelected: function () {
        var selectedLayer = this.layerDijit.item;

        if(this.getSelectedLayerUrl() === null) {
            return;
        }

        //Se limpia el campo actual
        this.fieldDijit.set("value", "");

        //Se arma la url del layer específico para traer la información de la capa (sus campos)
        var layerUrl = this.rootMapLayer.url + "/" + selectedLayer.id;

        esri.request({
            url: layerUrl,
            content: {
                f: "json"
            },
            handleAs: "json",
            callbackParamName: 'callback',
            load: lang.hitch(this, '_handleLayerInfo'),
            error: lang.hitch(this, '_handleLayerInfoError')
        });
    },
_handleLayerInfo: function(data) {
        var layerInfo = data;
        if (!layerInfo.fields) {
            console.error("No se pudo obtener la información de los campos de la capa");
            return;
        }

        var fieldsStore = new Memory({
            data: layerInfo.fields
        });

        this.fieldDijit.set('store', fieldsStore);
    },

    getSelectedLayerUrl: function(){
        var selectedLayer = this.layerDijit.item;
        if(!selectedLayer) {
            return null;
        }
        //Se arma la url del layer específico para traer la información de la capa (sus campos)
        return this.rootMapLayer.url + "/" + selectedLayer.id;
    },

    _handleLayerInfoError: function(err){
        console.error(err);
    },

起動されない関数、2 番目のフィルター選択の se change イベントを処理することが想定されている関数:

_handleFieldSelected: function () {
        alert("doesn't get fired");
        /*var selectedField = this.fieldDijit.item;

        if(!selectedField) {
            return;
        } */
    },

この問題についてアドバイスをいただけますか?, 何が間違っているのでしょうか?.

前もって感謝します

4

2 に答える 2

3

司教様、ご回答ありがとうございます。質問がわかりにくかったと思います。ユーザー (またはバックグラウンドで何か) が FilteringSelect で選択された項目を変更すると、「onChange」イベントが発生することになっていることを理解しています。私の問題は、ユーザーが 2 番目の FilteringSelect コントロールからアイテムを選択したときに、その onchange イベントが発生しなかったことです。

あなたが提案したように、私はより簡単な例（ハードコードされたメモリオブジェクトを使用）を試してみましたが、うまくいきました.

明らかに、Memory オブジェクトを宣言するときは、次の例のように、配列コレクション オブジェクトに ID フィールドがあることを確認する必要があります。

var stateStore = new Memory({
            data: [
                {name:"Alabama" id:"AL"},
                {name:"Alaska", id:"AK"},
                {name:"American Samoa", id:"AS"},
                {name:"Arizona", id:"AZ"},
                {name:"Arkansas", id:"AR"},
                {name:"Armed Forces Europe", id:"AE"},
                {name:"Armed Forces Pacific", id:"AP"},
                {name:"Armed Forces the Americas", id:"AA"},
                {name:"California", id:"CA"},
                {name:"Colorado", id:"CO"},
                {name:"Connecticut", id:"CT"},
                {name:"Delaware", id:"DE"}
            ]
        });
        this.fieldDijit.set('store', stateStore);

メモリオブジェクト宣言で明示しない場合は、「id」というフィールドがあるとみなされます。私の場合、2 番目の filteringSelect でメモリ オブジェクトに割り当てた配列には、「id」というフィールドがありませんでした。

だから私は変更しました：

var fieldsStore = new Memory({
            data: layerInfo.fields
        });

為に：

var fieldsStore = new Memory({
            idProperty: "name", //added this
            data: layerInfo.fields
        });

2 番目の filterin select で選択された項目が変更されると、イベントが発生します。

于 2013-10-26T20:29:40.063 に答える