javascript - Knockout JS 级联状态/城市下拉列表(使用 JSON)

Question

我有两个字段，州和城市。当用户选择他们的状态时，我正在向正在返回的服务器发送调用:

[{"id":"4488","rc_abbr":"BILLINGS"},{"id":"4489","rc_abbr":"MISSOULA"},{"id":"4490","rc_abbr":"GREATFALLS"},{"id":"4491","rc_abbr":"HELENA"},{"id":"4492","rc_abbr":"BOZEMAN"},{"id":"4493","rc_abbr":"BUTTE"},{"id":"4494","rc_abbr":"HAMILTON"},{"id":"4495","rc_abbr":"BELGRADE"},{"id":"4496","rc_abbr":"LIVINGSTON"},{"id":"4497","rc_abbr":"LAUREL"},{"id":"4498","rc_abbr":"MILES CITY"},{"id":"4499","rc_abbr":"STEVENSVL"},{"id":"4500","rc_abbr":"LEWISTOWN"},{"id":"4501","rc_abbr":"ANACONDA"},{"id":"4502","rc_abbr":"DILLON"},{"id":"4503","rc_abbr":"HARDIN"},{"id":"4504","rc_abbr":"GLENDIVE"},{"id":"4505","rc_abbr":"DEER LODGE"},{"id":"4506","rc_abbr":"SIDNEY"},{"id":"4507","rc_abbr":"CUT BANK"},{"id":"4508","rc_abbr":"MANHATTAN"},{"id":"4509","rc_abbr":"RED LODGE"},{"id":"4510","rc_abbr":"FRENCHTOWN"},{"id":"4511","rc_abbr":"THREEFORKS"},{"id":"4512","rc_abbr":"COLUMBUS"},{"id":"4513","rc_abbr":"CONRAD"},{"id":"4514","rc_abbr":"SHELBY"},{"id":"4515","rc_abbr":"COLSTRIP"},{"id":"4516","rc_abbr":"WYELLOWSTN"},{"id":"4517","rc_abbr":"FORSYTH"},{"id":"4518","rc_abbr":"GALATNGTWY"},{"id":"4519","rc_abbr":"JOLIET"},{"id":"4520","rc_abbr":"GARDINER"},{"id":"4521","rc_abbr":"CLYDE PARK"},{"id":"4522","rc_abbr":"FROMBERG"},{"id":"4523","rc_abbr":"FAIRVIEW"},{"id":"4524","rc_abbr":"BRIDGER"},{"id":"4525","rc_abbr":"WIBAUX"},{"id":"4526","rc_abbr":"TERRY"},{"id":"4527","rc_abbr":"WILSALL"},{"id":"4528","rc_abbr":"WOLF CREEK"},{"id":"4529","rc_abbr":"COOKE CITY"},{"id":"4530","rc_abbr":"SILVERTIP"},{"id":"4531","rc_abbr":"NO PARKMAN"}]

在 knockout 中，我需要用这些数据更新城市字段。我的问题与获取 ajax 数据成功响应并将其放入的方式有关，我不确定语法是否正确。

这是 fiddle :http://jsfiddle.net/VJbVs/

HTML

<select data-bind="value: selectedState">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<select data-bind="options: cities, optionsText: 'Name', optionsValue: 'ID', value: selectedCity"></select>

脚本

(function () {

    var ViewModel = function () {

        this.selectedState = ko.observable();
        this.selectedState.states = [];

        this.selectedCity = ko.observable();

        this.selectedState.subscribe(function () {
            this.selectedCity(undefined);
        }, this);

        var getById = function (items, id) {
            return ko.utils.arrayFirst(items, function (item) {
                $.ajax({
                    url: 'activate/get/coverage',
                    type: 'POST',
                    beforeSend: function(){},
                    data: ko.toJSON({state: item.ID}),
                    contentType: 'application/json',
                    complete: function(data){}, 
                    success: function (result) {this.selectedState.states = result;}
                });
                return item.ID == id;
            });
        };

        this.cities = ko.computed(function () {
            var state = getById(this.selectedState.states, this.selectedState());
            return state ? ko.utils.arrayMap(state.States, function (item) {
                return {
                    id: item.ID,
                    rc_abbr: item.Name
                };
            }) : [];
        }, this);

    };

    var model = new ViewModel();
    ko.applyBindings(model, document.getElementById('didScreen'));

})();

Answer 1

我将此作为答案发布，我们在 chat talking 中花费了大量时间(不知道别人能不能打开那个链接)。

HTML:

<div data-bind="foreach: items">
    <select data-bind="options: $parent.states, optionsText: 'name', value: state"></select>
    <select data-bind="options: cities, optionsText: 'name', value: city"></select>
    <button data-bind="click: $parent.remove">Remove</button>
</div>
<button data-bind="click: newItem">Add Item</button>

JS:

var Item = function() {
    var self = this;
    self.state = ko.observable();
    self.city = ko.observable();
    self.cities = ko.observableArray([]);
    self.state.subscribe(function(state) {
        self.city("");
        self.cities.removeAll();
        $.ajax({
            url: '/echo/json/',
            type: 'POST',
            data: {
                json: ko.toJSON([
                    { id: 1, name: "Billings"},
                    { id: 2, name: "Sweego"},
                    { id: 3, name: "NorthFall"}
                ]),
                delay: 2
            },
            success: function(response) {
                self.cities(response);
            }
        });
    });
};

var ViewModel = function(states) {
    var self = this;
    self.states = states;
    self.items = ko.observableArray([new Item()]);
    self.newItem = function() {
        self.items.push(new Item());
    };
    self.remove = function(item) {
        self.items.remove(item);
    };
};

这是 final fiddle