KendoUI-使用MVVM和远程数据时的级联下拉列表

Question

我有一个KendoUI下拉列表，它从网络服务中获取数据，这取决于所选的项目，第二个下拉列表被填充。我使用MVVM绑定。

我的代码如下所示：

<div id="ddlDiv">
    <div data-container-for="MEASURE" required class="k-input k-edit-field">
    <select id="MEASURE"
            name="MEASURE"
            data-role="dropdownlist" 
            data-text-field="FIELD_NAME" 
            data-value-field="FIELD_ID" 
            data-bind="value: summaryDef.MeasureID, source: fieldList"                                 
            ></select>                      
    </div>       

    <div data-container-for="OPERATION" required class="k-input k-edit-field">
    <select id="OPERATION"
            data-cascade-from: "MEASURE"
            data-role="dropdownlist" 
            data-text-field="TYPE" 
            data-value-field="OP_ID" 
            data-source=opListDS
            data-bind="value: summaryDef.OperationID"                 
            ></select>                      
    </div>               

 datasetMetaModel = kendo.observable({
    fieldList: datasetModel.FieldDTOList,
    summaryDef: datasetModel.SummaryDef
    });

kendo.bind($("#ddlDiv"), datasetMetaModel);

var opListDS = BuildOperationFields();
function BuildOperationFields() {
    opListDS = new kendo.data.DataSource({
        transport: {
            read: {
                url: '@Url.Action("GetMeasureOperations", "Wizard")',
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                serverFiltering: true,
                type: "GET"
            }
        }

    });

    return opListDS;        
}

两个列表的数据最初都已正确填充，并且已正确绑定到模型。但是，更改第一个下拉列表的值不会导致第二个下拉列表刷新其数据。从未触发对web服务的调用。

我在这里看到过使用本地数据的类似情况：

用于级联DropDownList的MVVM绑定

Answer 1

我不知道这对你来说是否仍然是一个问题，因为已经有一段时间没有问这个问题了，但我想我会回答，因为我今天也有类似的问题，并设法用变通方法解决了它。

我所做的是将处理程序绑定到父组合框的onChange事件，并在子组合框的数据源上手动调用read（）

例如。

超文本标记语言：

<div id="content-wrapper">
    <div class="editor-row">
         <div class="editor-label"><label>Country:</label></div>
         <div class="editor-field">
            <select id="Country" name="Country" data-role="combobox"
                    data-text-field="CountryName"
                    data-value-field="CountryId"
                    data-filter="contains"
                    data-suggest="false"
                    required
                    data-required-msg="country required"
                    data-placeholder="Select country..."
                    data-bind="source: dataSourceCountries, value: country, events: { change: refreshCounties }">
            </select>
            <span class="field-validation-valid" data-valmsg-for="Country" data-valmsg-replace="true"></span>
         </div>
   </div>
   <div class="editor-row">
        <div class="editor-label"><label>County:</label></div>
        <div class="editor-field">
           <select id="County" name="County" data-role="combobox"
                   data-text-field="CountyName"
                   data-value-field="CountyId"
                   data-filter="contains"
                   data-auto-bind="false"
                   data-suggest="false"
                   data-placeholder="Select county..."
                   data-bind="source: dataSourceCounties, value: county">
           </select>
           <span class="field-validation-valid" data-valmsg-for="County" data-valmsg-replace="true"></span>
         </div>
</div>

然后我的视图模型：

$ns.viewModel = kendo.observable({
                dataSourceCountries: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: href('~/Api/GeographicApi/ListCountries'),
                            dataType: 'json'
                        }
                    },
                    schema: {
                        data: function (response) { return response.Data || {}; }
                    }
                }),
                dataSourceCounties: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: function () { var combobox = $('#Country').data('kendoComboBox'), id = combobox !== undefined ? combobox.value() : 0; return href('~/Api/GeographicApi/ListCountiesByCountryId/' + id) },
                            dataType: 'json'
                        }
                    },
                    schema: {
                        data: function (response) { return response.Data || {}; }
                    }
                }),
                refreshCounties: function (e) {
                    var countiesList = $('#County').data('kendoComboBox');
                    e.preventDefault();
                    countiesList.dataSource.read();
                }
});
kendo.bind($('#content-wrapper'), $ns.viewModel);

如果您还没有找到解决方案，希望这对您有所帮助。。。