javascript - 从选定的数组对象中检索 bool 值

Question

目标

我正在尝试创建一个表单，该表单将根据“计划类型”的单个首选显示不同的下拉(选择)列表，例如(“基本”、“标准”、“豪华”)。

如果用户选择“基本”，则用户可以从名为“选项 A”的新下拉列表中进行选择。如果他们选择“标准”或“豪华”，那么他们会收到“选项 B”。

编辑目标

我想我真的需要让 isOptionA 或 isOptionB 在我看来可供使用。

要求

用户只能看到他们选择的选项，我不想显示任何类型的禁用字段(原因:在我看来，这对于基本用户来说是一种糟糕的体验)。

此外，用户在任何时候都不得更改所有下拉列表中的选项。

过去的研究

我爬行了各种网站，包括 SO。他们没有人能帮我把它们放在一起。

HTML

<div>
    <select id="planType" data-bind="options: planTypes, value: selectedPlanType, optionsText : 'name', optionsValue : 'id', optionsCaption : 'Select your Plan'"></select>
</div>
<div data-bind="if: isOptionA">
    Option A Available!
</div>

knockout JS

var viewModel = function(){
    var self = this;
    self.planTypes = [
        { id: 0, name: 'Basic', optionA: false, optionB: true },
        { id: 1, name: 'Standard', optionA: true, optionB: false },
        { id: 2, name: 'Deluxe', optionA: true, optionB: false }
    ];

    self.selectedPlanType = ko.observable();
    self.isOptionA = ko.computed(function(){
        //pass the currently selected plan type's boolean for optionA to
        //'isOptionA'
    });
    self.isOptionB = ko.computed(function(){
        //pass the currently selected plan type's boolean for optionB to
        //'isOptionB'
    });

};

ko.applyBindings(viewModel);

请在此处查看我的 js fiddle ，如果可以的话请提供帮助。

http://jsfiddle.net/winsconsinfan/9jqgazfx/9/

Answer 1

在绑定(bind)中不设置 optionsValue 会更容易。通过设置 optionsValue，该值将投影到所选选项的属性。在这种情况下，如果对应的选定选项，selectedPlanType 将是 id。仅使用选项本身会让一切变得更容易，这样您就不必弄清楚再次选择了哪个。

<select id="planType" data-bind="options: planTypes,
                                 value: selectedPlanType,
                                 optionsText: 'name',
                                 optionsCaption: 'Select your Plan'">
</select>

鉴于 selectedPlanType 现在将保存所选的实际 planType 对象，只需检查所选计划类型的选项值即可。

self.selectedPlanType = ko.observable(); // now a planType object, not id
self.isOptionA = ko.computed(function(){
    var selectedPlanType = self.selectedPlanType();
    return selectedPlanType && !!selectedPlanType.optionA;
});
self.isOptionB = ko.computed(function(){
    var selectedPlanType = self.selectedPlanType();
    return selectedPlanType && !!selectedPlanType.optionB;
});

http://jsfiddle.net/9jqgazfx/10/

<小时/>

否则，如果您需要该选择来实际使用 id，则需要进行一些调整来确定从 id 中选择了哪个 planType 对象。计算出的可观察量在这里会有所帮助。

<select id="planType" data-bind="options: planTypes,
                                 value: selectedPlanTypeId,
                                 optionsText: 'name',
                                 optionsValue: 'id',
                                 optionsCaption: 'Select your Plan'">
</select>

self.selectedPlanTypeId = ko.observable();
self.selectedPlanType = ko.computed(function () {
    var selectedPlanTypeId = self.selectedPlanTypeId();
    return ko.utils.arrayFirst(self.planTypes, function (planType) {
        return planType.id == selectedPlanTypeId;
    });
});

http://jsfiddle.net/9jqgazfx/14/