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"}] 

在淘汰賽我需要這個數據來更新這個城市場。我的問題與我獲得ajax數據成功響應並將其放入的方式有關，我不確定正確的語法。

這裏是小提琴：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