如何爲每個數組綁定依賴選擇列表

Question

我想創建一個表格，其中我有兩列，每列都有下拉列表。 第二欄的下拉依賴於第一列，但我不能讓dependentObservable下面

是我的代碼

<table> 
<thead> 
    <tr><th>First</th><th>Last</th></tr> 
</thead> 
<tbody data-bind="foreach: List"> 
    <tr> 
     <td><select data-bind="options: stateList, optionsValue: 'id' ,optionsText: 'name', value: stateId, optionsCaption: 'Choose...'"></select></td> 
     <td ><select data-bind="options: cities, optionsCaption: 'Choose...'"></select></td> 
    </tr> 
</tbody> 

JS

states=[{id:1,name:"MP"}, 
{id:2,name:"UP"}, 
    {id:3,name:"MH"}, 
    {id:4,name:"AP"}, 
    {id:5,name:"KP"} 

]; 

city=[{cityid:1,name:"Indore"}, 
{cityid:1,name:"Gwalior"}, 
    {cityid:1,name:"Bhopal"}, 
    {cityid:2,name:"Jhansi"}, 
{cityid:2,name:"Kanpur"}, 
    {cityid:2,name:"Merut"}, 
    {cityid:3,name:"Pune"}, 
{cityid:3,name:"Mumbai"}, 
    {cityid:4,name:"Hyderbad"}, 
    {cityid:5,name:"Banglore"}, 
{cityid:5,name:"Mysore"} 

]; 

viewModel=function(){ 
self=this; 

self.state=ko.observableArray(states); 
self.stateId=ko.observable(); 

self.cityId=ko.observable(); 
self.cityList=ko.observableArray(city); 
self.SelectedCityList=ko.dependentObservable(function(){ 
    var state=this.stateId(); 
    var arr=[]; 
    if(state){ 
     ko.utils.arrayForEach(this.cityList(),function(item){ 
      if(item.cityid===state){ 
      arr.push(item); 
      } 
     }); 

    } 
return arr; 
},this); 

self.List=ko.observableArray([{stateList:ko.observableArray(self.state()),cities:self.SelectedCityList,cityList:ko.observableArray(self.cityList()),stateId:ko.observable(),cityId:ko.observable()}, 
           {stateList:ko.observableArray(self.state()),cities:this.SelectedCityList,cityList:ko.observableArray(self.cityList()),stateId:ko.observable(),cityId:ko.observable()} 
         ]); 

} 
ko.applyBindings(new viewModel()); 

請幫我出 這是小提琴的鏈接click here

Answer 1

您需要在整個模型中定義「模型」數組。看看它是如何工作的：

states=[{id:1,name:"MP"}, 
    {id:2,name:"UP"}, 
     {id:3,name:"MH"}, 
     {id:4,name:"AP"}, 
     {id:5,name:"KP"} 

    ]; 

city=[{cityid:1,name:"Indore"}, 
    {cityid:1,name:"Gwalior"}, 
     {cityid:1,name:"Bhopal"}, 
     {cityid:2,name:"Jhansi"}, 
    {cityid:2,name:"Kanpur"}, 
     {cityid:2,name:"Merut"}, 
     {cityid:3,name:"Pune"}, 
    {cityid:3,name:"Mumbai"}, 
     {cityid:4,name:"Hyderbad"}, 
     {cityid:5,name:"Banglore"}, 
    {cityid:5,name:"Mysore"} 

    ]; 

viewModel=function(){ 
    self=this; 

    self.init = function(statesList, citiesList) 
    { 
     self.state(statesList); 
     self.cityList(citiesList) 
    }; 
    self.state=ko.observableArray(states); 
    self.stateId=ko.observable(); 

    self.cityId=ko.observable(); 
    self.cityList=ko.observableArray(city); 
    self.SelectedCityList=ko.dependentObservable(function(){ 
     var state=this.stateId(); 
     var arr=[]; 
     if(state){ 
      ko.utils.arrayForEach(this.cityList(),function(item){ 
       if(item.cityid===state){ 
       arr.push(item); 
       } 
      }); 

     } 
    return arr; 
    },this); 


} 
var model = function(){ 
var self = this; 
    self.List = ko.observableArray([new viewModel(states, city), new viewModel(states, city)]); 
}; 
ko.applyBindings(new model()); 

我已經刪除了示例表外：

> <table> 
>  <thead> 
>   <tr><th>First</th><th>Last</th></tr> 
>  </thead> 
>  <tbody data-bind="foreach: List"> 
>   <tr> 
>    <td><select data-bind="options: state, optionsValue: 'id' ,optionsText: 'name', value: stateId, optionsCaption: 
> 'Choose...'"></select></td> 
>    <td ><select data-bind="options: SelectedCityList, optionsValue: 'cityid' ,optionsText: 'name', value: cityId, 
> optionsCaption: 'Choose...'"></select></td> 
>   </tr> 
>  </tbody> </table> 

見琴：http://jsfiddle.net/SeaCat/s56QL/