用于级联 DropDownList 的 MVVM 绑定答案

【问题标题】：MVVM binding for cascading DropDownList用于级联 DropDownList 的 MVVM 绑定
【发布时间】：2012-11-23 09:52:37
【问题描述】：

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

问题是当我尝试将一些数据绑定到这些 DropDownLists 时，这些 DropDownLists 更新了 State 而不是 City。

这是我页面的 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 它不会将 city 设置为 Berkeley。

似乎在 States DropDownList 中使用 bind 不会触发 change 事件，然后 City DropDownList 不会用 重新加载新州的城市。

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

我应该如何将级联与MVVM绑定一起使用？

【问题讨论】：

您最好尝试使用源绑定来绑定下拉列表。将使您的代码更简单。以下是一些示例：demos.kendoui.com/web/mvvm/widgets.html
@AtanasKorchev 这些示例是关于通用小部件绑定的。我没有看到任何特定于级联下拉列表的内容。我是否应该明白即使DropDownLists 支持绑定，Cascading DropDownList 也不支持？如果是这样，那么我修复在设置DropDownList 值时添加触发change 事件的源（我已经有一个工作版本）。我实际上是在寻找正确的使用方法。
我已经向您展示了该示例以了解如何使用源绑定。它将大大简化您的代码。多次调用 kendo.bind 也不是最佳实践。通常你应该只调用一次，剩下的由 MVVM 完成。
顺便说一句，我所做的是在kendoDropDownList Widget 的value 函数中添加that.trigger("change");。但我看不到可能的副作用，这就是为什么我更喜欢 official 解决方案。

标签： kendo-ui cascadingdropdown

【解决方案1】：

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

【讨论】：

尽管如此，您仍然无法以编程方式更新city。您需要在kendoDropDownList 中将that.trigger("change"); 添加到value。检查我在jsbin.com/ujorer/3中的意思
是的。应该工作。看看我们是否可以在未来的版本中解决这个问题。在此之前，您可以手动触发更改事件。