根据单选按钮值设置HTML代码段的可见性

Question

我想使一些html，例如<p>Only visible if almond checked</p>，只有在选中带有value="almond"的单选按钮时才可见。

这是我试过的。意见：

<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<p>Only visible if almond checked</p>
<div data-bind="visible: wantsSpam">
    Preferred flavor of spam:
    <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
    <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
    <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>
</div>

这个视图模型：

 var viewModel = {
        wantsSpam: ko.observable(true),
        spamFlavor: ko.observable("almond")
    };

ko.applyBindings(viewModel);

另见这弹琴。

Answer 1

最直截了当的办法是：

<p data-bind="visible: spamFlavor() === 'almond'">Only visible if almond checked</p>

见这把小提琴。

通常，您希望将spamFlavor() == 'almond'位移动到具有某种意义的独立视图模型属性。也许是这样的：

<p data-bind="visible: almondSpecialVisible">Only visible if almond checked</p>

视图模型：

viewModel.almondSpecialVisible = ko.computed(function() { 
    return viewModel.spamFlavor() == 'almond'; 
});

见这把小提琴。