knockout.js - ラジオ ボタンの値に応じて HTML スニペットの可視性を設定する

Question

<p>Only visible if almond checked</p>のラジオボタンvalue="almond"がチェックされている場合にのみ表示されるなど、少しhtmlを作成したいと思います。

これが私が試したことです。景色：

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

このフィドルを参照してください。