라디오 버튼 값에 따라 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); 

도 this jsfiddle 참조하십시오.

Answer 1

가장 간단한 방법이 될 것이다 :

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

이 this fiddle를 참조하십시오.

일반적으로 spamFlavor() == 'almond' 비트를 일부 의미가있는 별도의보기 모델 속성으로 이동하려고합니다. 이 같은 아마 뭔가 :

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

뷰 모델은 :

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

this fiddle를 참조하십시오.