2

プログラムで作成されるdojo.form.FilteringSelectウィジェットがにdojo.Dialogあります。初めて選択してに入力したときに、期待どおりに機能するonChangeイベントをに接続しました。その後、何か新しいものを選択しても、イベントは発生しません。FilteringSelectFilteringSelectonChange

ステートメントonChangeにパラメーターを提供するときに、プロパティを宣言しようとしました。new FilteringSelectを使ってみましたdojo.connect。私は試しましmySelectDijit.onた。すべて同じ効果があります。

var select = new dijit.form.FilteringSelect({
    id : "fields-select-" + expNum,
    store : store,
    required : false,
    intermediateChanges : true
}, fieldinput);

dojo.connect(select, 'onChange', LoadOperatorValue);

onChange変更のたびにイベントを発生させるにはどうすればよいFilteringSelectですか？

アップデート：

関連するコードを追加しました。このコードは、Dojoを含むArcGIS JavascriptAPIv3.3に基づいています。

dojo.require("dijit.Dialog");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dojo.store.Memory");
dojo.require("dijit.form.MultiSelect");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.form.NumberSpinner");
dojo.require("dijit.form.DateTextBox");

var expNum = 1;
var queryDiv;
var layer;
var dialog;

function CreateDialog(lyr) {

    layer = lyr;

    queryDiv = dojo.create("div", {
        id : "queryDiv"
    });

    var buttonInput = dojo.create("button", {
        id : "button"
    }, queryDiv);

    var button = new dijit.form.Button({
        id : "addExpression",
        label : "Add Expression",
        onClick : function() {
            BuildExpression(layer);
        }
    }, buttonInput);

    BuildExpression(layer)

    dialog = new dijit.Dialog({
        title : "Query: " + layer.layerObject.name,
        content : queryDiv,
        style : "width: 600px"
    });

    dialog.show();
}

function BuildExpression(layer) {

    var expDiv = dojo.create("div", {
        class : "expression",
        id : "expression-" + expNum
    }, queryDiv);

    var filterDiv = dojo.create("div", {
        class : "filter",
        id : "filter-" + expNum
    }, expDiv);

    var fieldSpan = dojo.create("span", {
        id : "field-" + expNum,
        class : "field"
    }, filterDiv);

    var operatorSpan = dojo.create("span", {
        id : "operator-" + expNum,
        class : "operator"
    }, filterDiv);

    var valueSpan = dojo.create("span", {
        id : "value-" + expNum,
        class : "value"
    }, filterDiv);

    var removeSpan = dojo.create("span", {
        id : "remove-" + expNum,
        class : "remove"
    }, filterDiv);

    var removeInput = dojo.create("button", {
        id : "button"
    }, removeSpan);

    var removeButton = new dijit.form.Button({
        id : "removeExpression" + expNum,
        label : "Remove",
        onClick : function() {
            dojo.destroy(expDiv);
        }
    }, removeInput);

    var fieldinput = dojo.create("input", {
        id : "field-input-" + expNum
    }, fieldSpan);

    var fields = [];
    dojo.forEach(layer.layerObject.fields, function(field, index) {
        if (index < layer.layerObject.infoTemplate.info.fieldInfos.length && layer.layerObject.infoTemplate.info.fieldInfos[index].visible == true) {
            field.operatorSpan = operatorSpan;
            field.valueSpan = valueSpan;
            fields.push({
                name : field.alias,
                id : field
            });
        }
    });

    var store = new dojo.store.Memory({
        data : fields
    });

    var select = new dijit.form.FilteringSelect({
        id : "fields-select-" + expNum,
        store : store,
        required : false,
        intermediateChanges : true
    }, fieldinput);

    dojo.connect(select, 'onChange', LoadOperatorValue);
    expNum++
}

function LoadOperatorValue(field) { debugger;
    dojo.empty(field.operatorSpan);
    dojo.empty(field.valueSpan);

    if ("domain" in field && "codedValues" in field.domain) {

        field.operatorSpan.innerHTML = "IS";

        var sel = dojo.create("select", {
            id : "multiselect-" + expNum
        }, field.valueSpan);

        dojo.forEach(field.domain.codedValues, function(cv, index) {
            dojo.create("option", {
                innerHTML : cv.name,
                value : cv.code
            }, sel);
        });

        var multiselect = new dijit.form.MultiSelect({}, sel);

    } else if (field.type == "esriFieldTypeString") {

        var operatorInput = dojo.create("input", {
            id : "operator-input"
        }, field.operatorSpan);

        var operators = [{
            name : "IS",
            id : " = "
        }, {
            name : "IS NOT",
            id : " <> "
        }, {
            name : "LIKE",
            id : " LIKE "
        }, {
            name : "NOT LIKE",
            id : " NOT LIKE "
        }];

        var opStore = new dojo.store.Memory({
            data : operators
        });

        var select = new dijit.form.FilteringSelect({
            id : "operator-select-" + expNum,
            store : opStore,
            required : false
        }, operatorInput);

        var valueInput = dojo.create("input", {
            id : "value-input"
        }, field.valueSpan);

        if (field.length < 50) {
            var textBox = new dijit.form.TextBox({
                id : "value-input-" + expNum
            }, valueInput);
        } else {
            var textBox = new dijit.form.Textarea({
                id : "value-input-" + expNum
            }, valueInput);
        }

    } else if (field.type == "esriFieldTypeDouble" || field.type == "esriFieldTypeSingle" || field.type == "esriFieldTypeInteger" || field.type == "esriFieldTypeSmallInteger") {

        var operatorInput = dojo.create("input", {
            id : "operator-input"
        }, field.operatorSpan);

        var operators = [{
            name : "=",
            id : " = "
        }, {
            name : "!=",
            id : " <> "
        }, {
            name : "<",
            id : " < "
        }, {
            name : "<=",
            id : " <= "
        }, {
            name : ">",
            id : " > "
        }, {
            name : ">=",
            id : " >= "
        }];

        var opStore = new dojo.store.Memory({
            data : operators
        });

        var select = new dijit.form.FilteringSelect({
            id : "operator-select-" + expNum,
            store : opStore,
            required : false
        }, operatorInput);

        var valueInput = dojo.create("input", {
            id : "value-input"
        }, field.valueSpan);

        var constraints = {};

        if ("domain" in field && "range" in field.domain) {
            constraints.min = field.domain.range.min;
            constraints.max = field.domain.range.max;
        }

        if (field.type == "esriFieldTypeDouble" || field.type == "esriFieldTypeSingle") {
            constraints.places = 2;
        }

        var numberSpinner = new dijit.form.NumberSpinner({
            id : "value-input-" + expNum
        }, valueInput);

    } else if (field.type == "esriFieldTypeDate") {

        var operatorInput = dojo.create("input", {
            id : "operator-input"
        }, field.operatorSpan);

        var operators = [{
            name : "IS",
            id : " = "
        }, {
            name : "IS NOT",
            id : " <> "
        }, {
            name : "Before",
            id : " < "
        }, {
            name : "Before or IS",
            id : " <= "
        }, {
            name : "After",
            id : " > "
        }, {
            name : "After or IS",
            id : " >= "
        }];

        var opStore = new dojo.store.Memory({
            data : operators
        });

        var select = new dijit.form.FilteringSelect({
            id : "operator-select-" + expNum,
            store : opStore,
            required : false
        }, operatorInput);

        var valueInput = dojo.create("input", {
            id : "value-input"
        }, field.valueSpan);

        var dateTextBox = new dijit.form.DateTextBox({
            id : "value-input-" + expNum
        }, valueInput);

    } else {

    }
}
4

2 に答える 2

2

過去にこれらのタイプのウィジェットを作成したときは、次のように作成しました。これは、ほぼ同じですが、変更ハンドラーに注意してください...

var select = new dijit.form.FilteringSelect({
    id : "fields-select-" + expNum,
    store : store,
    required : false,
    onChange: function(value){
        //do something here
    }
}, fieldinput);

更新：あなたの投稿を読み直すと、あなたはすでにこの方法を試していることがわかります。過去に私のために働いていたので、参考のために答えに残しておくと思いました。

アップデート

dojo 1.8に関しては、 dojoのテンプレート化されたウィジェットを使用して、JavaScriptでプログラムによって作成された要素の多くを削除することを検討する価値があるかもしれません。また、dijitを選択する、カスタムウィジェット、モジュールの定義チュートリアルなど、他のいくつかのdojoチュートリアルを実行する価値があります。これらは、dojoウィジェットを最大限に活用するのに役立ちます。「選択的」なものには、フィルタリング選択ウィジェットが含まれています。

onChangeイベントが1回だけディスパッチされる理由を判断するのは困難です。私が本当に言えるのは、フィルタリングされた選択ウィジェットがある場合はすべてを完全に単純化し、onChangeイベントを単独で複数回キャッチできるようにすることです。次に、残りのコードの統合を開始します。

申し訳ありませんが、正確な答えを出すことができませんでした。これからも探していきます。

アップデート

コードを取得し、dojo 1.8を使用してテスト環境で実行しました。レイヤーオブジェクトを削除して単純な配列に置き換える必要がありましたが、問題なく機能しているようです。また、defineを使用してコードをモジュールに変更しました（モジュールチュートリアルで説明されています）。これがコードです...

define(["dijit/Dialog",
        "dijit/form/FilteringSelect",
        "dojo/store/Memory",
        "dijit/form/MultiSelect",
        "dijit/form/TextBox",
        "dijit/form/Textarea",
        "dijit/form/NumberSpinner",
        "dijit/form/DateTextBox"],

    function (){

        var expNum = 1;
        var queryDiv;
        var layer;
        var dialog;

        function BuildExpression(layer) {

            var expDiv = dojo.create("div", {
                class : "expression",
                id : "expression-" + expNum
            }, queryDiv);

            var filterDiv = dojo.create("div", {
                class : "filter",
                id : "filter-" + expNum
            }, expDiv);

            var fieldSpan = dojo.create("span", {
                id : "field-" + expNum,
                class : "field"
            }, filterDiv);

            var operatorSpan = dojo.create("span", {
                id : "operator-" + expNum,
                class : "operator"
            }, filterDiv);

            var valueSpan = dojo.create("span", {
                id : "value-" + expNum,
                class : "value"
            }, filterDiv);

            var removeSpan = dojo.create("span", {
                id : "remove-" + expNum,
                class : "remove"
            }, filterDiv);

            var removeInput = dojo.create("button", {
                id : "button"
            }, removeSpan);

            var removeButton = new dijit.form.Button({
                id : "removeExpression" + expNum,
                label : "Remove",
                onClick : function() {
                    dojo.destroy(expDiv);
                }
            }, removeInput);

            var fieldinput = dojo.create("input", {
                id : "field-input-" + expNum
            }, fieldSpan);

            var fields = [{"name":"value1", "id":"v1"}, {"name":"value2", "id":"v2"}];
            //dojo.forEach(layer.layerObject.fields, function(field, index) {
            //    if (index < layer.layerObject.infoTemplate.info.fieldInfos.length && layer.layerObject.infoTemplate.info.fieldInfos[index].visible == true) {
            //        field.operatorSpan = operatorSpan;
            //        field.valueSpan = valueSpan;
            //        fields.push({
            //            name : field.alias,
            //            id : field
            //        });
            //    }
           // });

            var store = new dojo.store.Memory({
                data : fields
            });

            var select = new dijit.form.FilteringSelect({
                id : "fields-select-" + expNum,
                store : store,
                required : false,
                intermediateChanges : true
            }, fieldinput);

            dojo.connect(select, 'onChange', function(value){console.log(value)});
            expNum++
        }

        function LoadOperatorValue(field) { debugger;
            dojo.empty(field.operatorSpan);
            dojo.empty(field.valueSpan);

            if ("domain" in field && "codedValues" in field.domain) {

                field.operatorSpan.innerHTML = "IS";

                var sel = dojo.create("select", {
                    id : "multiselect-" + expNum
                }, field.valueSpan);

                dojo.forEach(field.domain.codedValues, function(cv, index) {
                    dojo.create("option", {
                        innerHTML : cv.name,
                        value : cv.code
                    }, sel);
                });

                var multiselect = new dijit.form.MultiSelect({}, sel);

            } else if (field.type == "esriFieldTypeString") {

                var operatorInput = dojo.create("input", {
                    id : "operator-input"
                }, field.operatorSpan);

                var operators = [{
                    name : "IS",
                    id : " = "
                }, {
                    name : "IS NOT",
                    id : " <> "
                }, {
                    name : "LIKE",
                    id : " LIKE "
                }, {
                    name : "NOT LIKE",
                    id : " NOT LIKE "
                }];

                var opStore = new dojo.store.Memory({
                    data : operators
                });

                var select = new dijit.form.FilteringSelect({
                    id : "operator-select-" + expNum,
                    store : opStore,
                    required : false
                }, operatorInput);

                var valueInput = dojo.create("input", {
                    id : "value-input"
                }, field.valueSpan);

                if (field.length < 50) {
                    var textBox = new dijit.form.TextBox({
                        id : "value-input-" + expNum
                    }, valueInput);
                } else {
                    var textBox = new dijit.form.Textarea({
                        id : "value-input-" + expNum
                    }, valueInput);
                }

            } else if (field.type == "esriFieldTypeDouble" || field.type == "esriFieldTypeSingle" || field.type == "esriFieldTypeInteger" || field.type == "esriFieldTypeSmallInteger") {

                var operatorInput = dojo.create("input", {
                    id : "operator-input"
                }, field.operatorSpan);

                var operators = [{
                    name : "=",
                    id : " = "
                }, {
                    name : "!=",
                    id : " <> "
                }, {
                    name : "<",
                    id : " < "
                }, {
                    name : "<=",
                    id : " <= "
                }, {
                    name : ">",
                    id : " > "
                }, {
                    name : ">=",
                    id : " >= "
                }];

                var opStore = new dojo.store.Memory({
                    data : operators
                });

                var select = new dijit.form.FilteringSelect({
                    id : "operator-select-" + expNum,
                    store : opStore,
                    required : false
                }, operatorInput);

                var valueInput = dojo.create("input", {
                    id : "value-input"
                }, field.valueSpan);

                var constraints = {};

                if ("domain" in field && "range" in field.domain) {
                    constraints.min = field.domain.range.min;
                    constraints.max = field.domain.range.max;
                }

                if (field.type == "esriFieldTypeDouble" || field.type == "esriFieldTypeSingle") {
                    constraints.places = 2;
                }

                var numberSpinner = new dijit.form.NumberSpinner({
                    id : "value-input-" + expNum
                }, valueInput);

            } else if (field.type == "esriFieldTypeDate") {

                var operatorInput = dojo.create("input", {
                    id : "operator-input"
                }, field.operatorSpan);

                var operators = [{
                    name : "IS",
                    id : " = "
                }, {
                    name : "IS NOT",
                    id : " <> "
                }, {
                    name : "Before",
                    id : " < "
                }, {
                    name : "Before or IS",
                    id : " <= "
                }, {
                    name : "After",
                    id : " > "
                }, {
                    name : "After or IS",
                    id : " >= "
                }];

                var opStore = new dojo.store.Memory({
                    data : operators
                });

                var select = new dijit.form.FilteringSelect({
                    id : "operator-select-" + expNum,
                    store : opStore,
                    required : false
                }, operatorInput);

                var valueInput = dojo.create("input", {
                    id : "value-input"
                }, field.valueSpan);

                var dateTextBox = new dijit.form.DateTextBox({
                    id : "value-input-" + expNum
                }, valueInput);

            } else {

            }
        }

        return {
            CreateDialog: function(lyr) {

                layer = lyr;

                queryDiv = dojo.create("div", {
                    id : "queryDiv"
                });

                var buttonInput = dojo.create("button", {
                    id : "button"
                }, queryDiv);

                var button = new dijit.form.Button({
                    id : "addExpression",
                    label : "Add Expression",
                    onClick : function() {
                        BuildExpression(layer);
                    }
                }, buttonInput);

                BuildExpression(layer)

                dialog = new dijit.Dialog({
                    title : "Query: ",// + layer.layerObject.name,
                    content : queryDiv,
                    style : "width: 600px"
                });

                dialog.show();
            }
        }
    }
)

次に、単純なhtmlファイルでモジュールを要求し、CreateDialog関数を呼び出してテストしました...

require(
    ["dojo/parser",
     "tb/testModule",
     "dojo/domReady!"],

    function(parser, testModule){               
        parser.parse();
        //test module
        testModule.CreateDialog({});
    }
)

注：パッケージ「tb / testModule」はtbを使用します。これは、 dojoconfigでパッケージ名を設定する方法であるためです。

フィルタされた選択ボックスに入力を開始すると、配列内の2つの値のいずれかでオートコンプリートが取得されるとすぐに、コンソールに同等の値が記録されます。

これが私が得たもののスクリーンショットです、あなたは私が最初にvalue1のidを記録し、次にvalue2のidを記録したのを見ることができます...

ここに画像の説明を入力してください

2番目のイベントを取得していない場合は、どこかで失われている必要があります。可変スコープが影響を与えるのではないかと思っていましたが、スコープを変更する必要はありませんでした。main関数をモジュールのreturnブロックに移動しました。

于 2013-02-08T22:00:17.680 に答える
1

id次のように配列に異なるものを配置するだけです。

var stateStore = new Memory({
        data: [
            {name:"Alabama", id:"AL"},
            {name:"Alaska", id:"AK"}
              ]
});
  1. id配列にがない場合、onChangeイベントは発生しません
  2. 2つの値idが同じである場合、onChangeイベントは初めて発生します。

@Brian次のようにIDにオブジェクトを配置した場合：

var stateStore = new Memory({
        data: [
            {name:"Alabama", id:{val:"dummy1"},
            {name:"Alaska", id:{val:"dummy2"}
              ]
});

2つのIDオブジェクトが互いに異なっていても、2つのIDFilteringSelectを次のようにチェックしないため、イベントは2回目に発生しません。

{val:"dummy1"}=={val:"dummy2"}

しかし、それはとしてチェックします

"[object Object]"=="[object Object]" //both are same and no onChange event will be fired
于 2013-06-26T10:13:32.787 に答える