5

kendoDropDownListカスケードを使用する 2 つの Web ページがあります。1 つ目はStatesで、2 つ目はCitiesです。州を選択すると、都市は 2 番目から選択できますDropDownList。マウスを使用してそれらを選択すると、これは完全にうまく機能します。

問題は、 Stateが更新されているがCityが更新されていないこれらの DropDownLists にデータをバインドしようとしたときです。

これは私のページの HTML です。

<div id="container">
    <input id="state" name="state" data-bind="value: state"/>
    <input id="city" name="city" data-bind="value: city"/>
</div>

これが JavaScript です。

var state = $("#state").kendoDropDownList({
    dataTextField: "state",
    dataValueField:"state",
    dataSource:    {
        serverFiltering:true,
        data:           states
    },
    change:        function () {
        console.log("state changed");
    }
}).data("kendoDropDownList");

var city = $("#city").kendoDropDownList({
    autoBind:      false,
    dataTextField: "city",
    dataValueField:"city",
    cascadeFrom:   "state",
    dataSource:    {
        serverFiltering:true,
        transport:      {
            read:function (operation) {
                var ds = cities [state.value()];
                if (ds) {
                    return operation.success(ds);
                } else {
                    return operation.success(["N/A"]);
                }
            }
        }
    }
}).data("kendoDropDownList");

データをバインドするために次のコードを使用すると:

kendo.bind($("#container"), { state:"California", city: "Berkeley" });

State DropDownListにすでに値が含まれていない限り、 には設定されCaliforniaません。cityBerkeley

usingはStatesでイベントをbindトリガーせず、Cityは新しいStateのCitiesでリロードされないようです。change DropDownList DropDownList

このコードはhttp://jsfiddle.net/OnaBai/QUhEX/3/にあります。

MVVM バインディングでカスケードを使用するにはどうすればよいですか?

4

1 に答える 1

6

MVVM でカスケード ドロップダウンリストを使用する方法を示すデモを用意しました: http://jsbin.com/ujorer/1/edit

于 2012-11-24T16:28:26.090 に答える