kendo-ui - 用于级联 DropDownList 的 MVVM 绑定(bind)

Question

我有一个包含两个 kendoDropDownList 的网页使用级联。第一个是州，第二个是城市。当您选择一个州时，您可以从第二个 DropDownList 中选择城市.如果我使用鼠标选择它们，这将非常有效。

问题是当我尝试将一些数据绑定(bind)到这些 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");

如果我使用以下代码绑定(bind)数据:

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

除非状态 DropDownList已包含值 California它不会设置 city至 Berkeley .

似乎使用 bind不会触发 change州事件 DropDownList然后是城市 DropDownList没有重新加载新州的城市。

您可以在 http://jsfiddle.net/OnaBai/QUhEX/3/ 中找到此代码

我应该如何使用 级联 与 MVVM 绑定(bind) ?

Answer 1

我准备了一个演示，展示如何将级联下拉列表与 MVVM 一起使用:http://jsbin.com/ujorer/1/edit