用于级联DropDownList的MVVM绑定

Question

我有一个网页,其中两个kendoDropDownList使用级联.第一个是国家和第二个城市.当您选择州时,您可以让城市从第二个中进行选择DropDownList.如果我使用鼠标选择它们,这非常有效.

问题是当我尝试将一些数据绑定到状态更新而不是城市的 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" });

除非国家 DropDownList已经包含的价值California也不会设置city到Berkeley.

似乎使用bind不会change在国家中 触发事件DropDownList,然后City DropDownList不会重新加载新州的城市.

你可以在http://jsfiddle.net/OnaBai/QUhEX/3/找到这个代码

我应该如何使用级联与MVVM结合？

Answer 1

我已经准备了一个演示如何在MVVM中使用级联下拉列表的演示:http://jsbin.com/ujorer/1/edit