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

Question

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

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

我发现很多其他问题是 真的接近但只是不同，我无法使用答案。抱歉，如果确实有重复，我只是使用了错误的搜索词而找不到它。

Answer 1

为了能够使用该选项绑定(bind)，您需要确保您还应用了 value绑定(bind)到它以标记选择了哪个项目。然后你可以制作 questions array 一个计算出的 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绑定(bind)以增加效果。

Updated fiddle