knockout.js - 根据单选按钮值设置 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);

另请参阅此 jsfiddle。

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'; 
});

看到这个小提琴。