用于级联DropDownList的MVVM绑定 [英] MVVM binding for cascading DropDownList

问题描述

我有一个使用级联的包含两个kendoDropDownList的网页.第一个是州，第二个是城市.选择州后，城市便可以从第二个DropDownList中进行选择.如果我用鼠标挑选它们，效果会很好.

I have a web page with two kendoDropDownList using cascading. The first are States and the second Cities. When you choose a State then you are able the City to choose from the second DropDownList. This works perfectly well if I pick them using the mouse.

问题是，当我尝试将某些数据绑定到更新了 State 而不是 City 的这些DropDownList上时.

The problem is when I try to bind some data to these DropDownLists where the State is updated but not the City.

这是我页面的HTML:

This is the HTML of my page:

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

这是JavaScript:

And this is the 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");

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

If I use the following code for binding the data:

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

除非 State DropDownList已经包含值California，否则不会将city设置为Berkeley.

Unless State DropDownList already contains the value California it will not set city to Berkeley.

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

Seems that using bind does not trigger a change event in States DropDownList and then City DropDownList is not reloaded with the Cities of the new State.

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

You can find this code in http://jsfiddle.net/OnaBai/QUhEX/3/

如何将级联与 MVVM绑定一起使用?

推荐答案

我准备了一个演示，演示如何在MVVM中使用级联下拉列表:

I've prepared a demo showing how to use cascading dropdownlists with MVVM: http://jsbin.com/ujorer/1/edit

这篇关于用于级联DropDownList的MVVM绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！