2

好吧，我是一个被淘汰的菜鸟。很难弄清楚一个非常简单的问题。我有一个与淘汰赛 observableArray 相关的下拉列表。还有一个与另一个 observableArray 相关的问题列表。问题应根据下拉列表的选定值隐藏/显示。

在你看小提琴之前，请阅读以下内容。
我硬编码了“EnvId() === 1”只是为了让它工作。我已经尝试了各种函数和 ko.computed（在“问题”和“viewModel”中）用“CurrentEnviron（）”之类的东西替换“1”，但是因为我没有把它们从小提琴中删除想要影响任何人的回答。好的，这是小提琴。

我发现了很多其他问题，它们非常接近，但差异很大，以至于我无法使用答案。抱歉，如果确实有重复，我只是使用了错误的搜索词并且找不到它。

4

2 回答 2

3

为了能够使用该选项绑定，您需要确保您还value对其应用绑定以标记选择了哪个项目。然后，您可以使questions数组成为一个计算的 observable，它会根据所选值返回一个过滤问题的数组。

Environment Type: <select id="qEnv" data-bind="value: selectedEnvironment, options: envTypes, optionsCaption: 'Select...', optionsValue: 'envId', optionsText: 'envName'"></select>

还要确保使用您创建的映射数组初始化可观察数组。不要像以前那样更换它们。（虽然在这种情况下它并不重要，因为数组没有被修改）

function viewModel() {
    var self = this;

    // initialize the array with the mapped array
    self.envTypes = ko.observableArray(ko.utils.arrayMap(environments, function(item) {
        return {
            envName: item.Text,
            envId: item.EnvId
        };
    }));

    // this tracks our selected environment value
    self.selectedEnvironment = ko.observable();

    // return a filtered array where the items match the selected environment
    self.questions = ko.computed(function () {
        return ko.utils.arrayFilter(quests, function (item) {
            return item.EnvId == self.selectedEnvironment();
        });
    });
}

您可能希望根据问题数组是否为空来显示问题或消息，因此您必须调整测试。

data-bind="if: questions().length"

环境具有重复EnvId值，因此我更新了这些值并添加了optionsCaption绑定以增加效果。

更新的小提琴

于 2012-09-20T16:07:46.923 回答
1

如果有人感兴趣，可以使用映射插件进行压缩。还修复了原始小提琴中的错误。

http://jsfiddle.net/jgerstorff/bxBKq/25/

于 2012-09-21T01:01:21.990 回答