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

我正在尝试将视图模型绑定到下拉列表表，并在每次选择注册表和剧集类型时更新视图模型，但我需要维护episodesTypes和注册表之间的关系。想法？

Answer 1

这是一个简单的链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>

我创建了一个名为getEpisodes的dependentObservable。每当selectedRegistry改变此episodeList再次计算。

KnockoutJs ... ObservableArray和两个下拉列表

1 个答案: