Knockout Template

Knockout Template

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<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>

JavaScript

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