0

次のシナリオがあります。ko.mapping を使用してサーバーからデータを取得しており、次の形式に変換されています。

var viewModel = {
    name: "Abc",
    educations: [{ course: "C1", countryID: 1, cityID = 2},
                 { course: "C2", countryID: 2, cityID = 3}]
}

また、次の 2 つの配列変数があります。

var countries = [{id=1,name="UAE"},{id=2,name="USA"},];
var cities = [{id=1,name="Dubai", cid=1},{id=2,name="Al-Ain", cid=1},
              {id=3,name="Newyork", cid=2},{id=4,name="Houston", cid=2},];

このデータを表示/編集するために、次のHTMLがあります

<div>
    <input type="text" data-bind="value: Name"/>
    <table data-bind="template: { name: 'cet', foreach: educations }">
    </table>
</div>
<script type="text/html" id="cet">
    <tr>
        <td>
            <select data-bind="options: countries, optionsText: 'name', optionsValue: 'id', optionsCaption: 'Select...', value: countryID"></select>
        </td>
        <td>
            <select data-bind="options: cities, optionsText: 'name', optionsValue: 'id', optionsCaption: 'Select...', value: cityID"></select>
        </td>
    </tr>
</script>

ここで必要なのは、データがサーバーから送信されるときに、バインドされたオブジェクトに対応する正しいアイテムが選択ボックスに表示されることです。

4

2 に答える 2

0

わかりましたそれを解決しました:)

データ バインディングは次のように行う必要があります。

<select id="Countries" name="Countries" data-bind="options: countries, optionsText: 'CountryName', optionsValue: 'CountryID', optionsCaption: 'Select...', value: SelectedCountryID"></select>
<select id="Cities" name="Cities" data-bind="options: Cities, optionsText: 'CityName', optionsValue: 'CityID', optionsCaption: 'Select...', value: CityID"></select>

まず、ko.mapping を実行してviewModelを「 Observable viewModel 」に変換する必要があります。コードは次のようになります。

if(viewModel.educations() != undefined && viewModel.educations().length > 0) {
    for(k in viewModel.educations()) {
        var education = viewModel.educations()[k];

        education.Cities = ko.observableArray();
        education.SelectedCountryID = ko.computed({
            read: function() {
                return(this.CountryID());
            },
            write: function(value) {
                this.CountryID(value);
                this.Cities.removeAll();

                if(value != undefined) {
                    for(c in cities) {
                        if(cities[c].cid == value) {
                            this.Cities.push(cities[c]);
                        }
                    }
                }
            },
            owner: education,
        });

        if(viewModel.educations()[k].CountryID() != 0 ||
            viewModel.educations()[k].CountryID() != undefined) {
            viewModel.educations()[k].SelectedCountryID(viewModel.educations()[k].CountryID());
        }
    }
}
于 2013-02-24T14:52:15.427 に答える
0

ほぼ目標に到達しました。コードの動作バージョンは次のとおりです。

var viewModel = {
    name: "Abc",
    educations: [{course: "C1", countryID: 1, cityID: 2},
                 {course: "C2", countryID: 2, cityID: 3}],
    countries: [{id: 1, name: "UAE"}, {id: 2, name: "USA"}],
    cities: [{id: 1, name: "Dubai", cid: 1},
             {id: 2, name: "Al-Ain", cid: 1},
             {id: 3, name: "Newyork", cid: 2},
             {id: 4, name: "Houston", cid: 2}]
};

ko.applyBindings(viewModel);

<div>
    <input type="text" data-bind="value: name" />
    <table data-bind="template: { name: 'cet', foreach: educations }"></table>
</div>
<script type="text/html" id="cet">
    <tr>
        <td>
            <select data-bind="options: $root.countries, optionsText: 'name', optionsValue: 'id', optionsCaption: 'Select...', value: countryID"></select>
        </td>
        <td>
            <select data-bind="options: $root.cities, optionsText: 'name', optionsValue: 'id', optionsCaption: 'Select...', value: cityID"></select>
        </td>
    </tr>
</script>
于 2013-02-21T18:04:22.443 に答える