knockout.js - 使用 knockout 根据下拉列表中选定的值隐藏/显示问题

Question

好吧，我是一个 knockout 菜鸟。很难解决一个非常简单的问题。我有一个与 knockout 的 observableArray 绑定(bind)的下拉列表。还有一个与另一个 observableArray 相关的问题列表。问题应根据下拉列表中选定的值隐藏/显示。

在查看 fiddle 之前，请阅读以下内容。
我对“EnvId() === 1”进行了硬编码，只是为了使其工作。我已经尝试了各种函数和 ko.compulated (在“问题”和“viewModel”中)将“1”替换为“CurrentEnviron()”之类的东西，但已将它们从 fiddle 中删除，因为我不想要影响任何人的答案。好的，这是 fiddle .

我发现了很多其他问题非常，但又足够不同，以至于我无法使用答案。抱歉，如果确实有重复项，我只是使用了错误的搜索词而找不到它。

Answer 1

为了能够使用该选项绑定(bind)，您需要确保还对其应用value 绑定(bind)以标记选择了哪个项目。然后，您可以将 questions 数组设置为计算可观察量，该数组将根据所选值返回经过过滤的问题数组。

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 绑定(bind)以增加效果。

Updated fiddle