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

Posted 2023-05-07

【中文标题】KendoUI - 使用 MVVM 和远程数据时的级联下拉列表

【英文标题】：KendoUI - Cascading Dropdownlist when using MVVM and Remote Data

【发布时间】：2013-08-08 21:48:56

【问题描述】：

我有一个 KendoUI 下拉列表，它从 Web 服务中获取数据，根据所选项目填充第二个下拉列表。我正在使用 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 服务的调用。

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

MVVM binding for cascading DropDownList

【参考方案1】：

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

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

例如

html：

<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);

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