如何从敲除js模板中管理子选择元素

Question

I have the following scenario, I am getting some data from the server using ko.mapping and it is translated in the form:

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

I also have 2 array variables, which are:

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},];

now to show / edit this data i have the following 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>

Now what I need is that when data is sent from the server, the select boxes should show the correct items corresponding to the bound objects.

Answer 1

You've almost reached your goal -- here is a working version of your code.

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>

Answer 2

Ok Solved it :)

Data Bindings should be done as follows:

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

First i'll have to run ko.mapping to convert the viewModel to an " Observable viewModel " then the Code will be like:

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