KnockoutJs ... ObservableArray和兩個下拉列表

Question

比方說，我有三個對象是這樣的：

var registryEpisode = function() { 
     var self = this; 

     self.registry = ko.observable(new registry()); 
     self.episodeType = ko.observable(new episodeType()); 
    }; 

    var episodeType = function() { 
     var self = this; 
     self.id = ko.observable(""), 
     self.name = ko.observable(""); 
    }; 
var registry = function() { 
    var self = this; 

    self.id = ko.observable(""), 
    self.name = ko.observable(""); 
}; 

然後，我有這樣的視圖模型：

var vm = function() { 
    var self = this; 
    self.registryEpisodeTypes = ko.observableArray([new registryEpisode()]); 

    self.addRegistryEpisodeType = function (episodeType, registry) { 
    var regEpisode = new registryEpisode(); 
    regEpisode.registry = registry; 
    regEpisode.episodeType = episodeType; 
      self.registryEpisodeTypes.push(regEpisode); 

     } .bind(this); 
    } 

我試圖綁定將視圖模型添加到下拉列表中，並在每次選擇註冊表和情節類型時更新視圖模型，但我需要維護episodesType和註冊表之間的關係。思考？

Answer 1

這裏是一個鏈條dropDownLists簡單implemantion：jsFiddle

var registryEpisode = function() { 
    var self = this; 

    self.registry = ko.observable(new registry()); 
    self.episodeType = ko.observable(new episodeType()); 
}; 

var episodeType = function(id, name) { 
    var self = this; 
    self.id = ko.observable(id), self.name = ko.observable(name); 
}; 

var registry = function() { 
    var self = this; 

    self.id = ko.observable(""), self.name = ko.observable(""); 
}; 

var vm = function() { 

    var self = this; 
    self.selectedRegistry = ko.observable(""); 
    self.registryEpisodeTypes = ko.observableArray([]); 

    self.addRegistryEpisodeType = function(episodeType, registry) { 
     var regEpisode = new registryEpisode(); 
     regEpisode.registry = registry; 
     regEpisode.episodeType = episodeType; 
      self.registryEpisodeTypes.push(regEpisode); 

    }.bind(this); 

    self.getRegistries = function() { 

     var hashCheck = {}; 
     var result = ko.observableArray([]); 
     ko.utils.arrayMap(self.registryEpisodeTypes(), function(item) { 
       if (hashCheck["" + item.registry.id()] === null || hashCheck["" + item.registry.id()] === undefined) { 
       hashCheck["" + item.registry.id()] = item.registry.name(); 
       result.push({ 
        "name": item.registry.name(), 
        "value": item.registry.id() 
       }); 
      } 
     }); 
     return result; 
    } 

    self.getEpisodes = ko.dependentObservable(function() { 
     var ret = self.registryEpisodeTypes(); 
     var selectedRegistryItem = self.selectedRegistry(); 
     if (selectedRegistryItem === null || selectedRegistryItem === undefined || selectedRegistryItem === "") 
      return ; 
     var result = ko.observableArray([]); 
     ko.utils.arrayMap(ret, function(item) { 
      if (item.registry.id() == selectedRegistryItem) result.push({ 
       "name": item.episodeType.name(), 
       "value": item.episodeType.id() 
      }); 
     }); 
     console.log(ko.toJSON(result)); 
      return result; 

    }); 
} 

var viewModel = new vm(); 

var breakingBad = new registry(); 
breakingBad.id("1000"); 
breakingBad.name("Breaking Bad"); 
viewModel.addRegistryEpisodeType(new episodeType("1", "E1-breakingBad"), breakingBad); 
viewModel.addRegistryEpisodeType(new episodeType("2", "E2-breakingBad"), breakingBad); 
viewModel.addRegistryEpisodeType(new episodeType("3", "E3-breakingBad"), breakingBad); 

var trueBlood = new registry(); 
trueBlood.id("1001"); 
trueBlood.name("True Blood"); 
viewModel.addRegistryEpisodeType(new episodeType("1", "E1-trueBlood"), trueBlood); 
viewModel.addRegistryEpisodeType(new episodeType("2", "E2-trueBlood"), trueBlood); 
viewModel.addRegistryEpisodeType(new episodeType("3", "E3-trueBlood"), trueBlood); 

ko.applyBindings(viewModel); 

<div> 
    <span data-bind="text:selectedRegistry"></span> 
</div> 
<div> 
    <select data-bind="options:getRegistries(),optionsText:'name',optionsValue:'value',value:selectedRegistry"></select> 
</div> 
<div> 
    <select data-bind="options:getEpisodes(),optionsText:'name',optionsValue:'value'"></select> 
</div> 

我創建了一個名爲dependentObservable getEpisodes。每當selectedRegistry更改此episodeList再次計算。