Question

Let’s say I have three objects like this:

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

Then I have a view model like this:

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

I’m trying to bind the view model to a table of dropdown lists and have the view model updated each time a registry and episode type is selected, but I need to maintain the relationship between episodesTypes and registries. Thoughts?

Answer 1

Here is a simple implemantion of a chain dropDownLists: 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>

I create a dependentObservable called getEpisodes. Whenever selectedRegistry changes this episodeList calculated again.