javascript - 如何为每个数组绑定(bind)依赖选择列表

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

请帮帮我 这是 fiddle 链接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>

参见 fiddle :http://jsfiddle.net/SeaCat/s56QL/