2

Web サービスからデータをフェッチする KendoUI ドロップダウンリストがあり、選択した項目に応じて 2 番目のドロップダウンが入力されます。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;        
}

両方のリストには、最初にデータが正しく入力されており、モデルに正しくバインドされています。ただし、最初のドロップダウンの値を変更しても、2 番目のドロップダウンのデータは更新されません。Web サービスへの呼び出しがトリガーされることはありません。

ここで、ローカル データを使用する同様の状況を見てきました。

カスケード DropDownList の MVVM バインディング

4

1 に答える 1

3

質問がされてからしばらく経っているので、これがまだあなたにとって問題であるかどうかはわかりませんが、今日私自身も同様の問題を抱えていて、回避策で解決できたので答えると思いました.

私がしたことは、ハンドラーを親コンボ ボックスの 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);

まだ解決策が見つからない場合は、これが役立つことを願っています...

于 2013-10-15T10:20:40.013 に答える