foreach 제어 흐름 및 radion을 템플릿으로 사용하는 녹아웃 j

Question

'확인 된'바인딩은 foreach 제어 흐름에 의해 생성 된 라디오 버튼과 호환되지 않습니다.

예 :

<div data-bind="foreach: targetAudience"> 
     <div> 
      <label> 
       <input name="targetAudience" type="radio" data-bind="checked: isSelected,value:id" /> 
       <span data-bind="text: name"></span> 
      </label> 
     </div> 
    </div> 

각 VM (단일 타겟)은 속성에 isSelected에서 선택된 라디오의 식별자를 얻을 것이다. 약간의 냄새가 난다. 누가 선택한 라디오인지 알 수있는 더 좋은 방법이 있습니까?

Answer 1

라디오 버튼으로 작업 할 때 '확인 된'바인딩은 배열의 각 항목에 플래그를 업데이트하는 대신 개별 라디오 버튼의 '값'으로 모델을 채우도록 설계되었습니다.

이 작업을 수행하는 가장 쉬운 방법은 부모에 값을 채우고 각 항목에 계산 된 관찰 가능 항목을 추가하여 선택한 플래그가 true 또는 false인지 여부를 결정하는 것입니다. 여기

는 샘플입니다

var Item = function(id, name, selected) { 
    this.id = id; 
    this.name = ko.observable(name); 
    this.selected = ko.computed(function() { 
     return parseInt(selected(), 10) == this.id; 
    }, this); 
}; 

var ViewModel = function() { 
    this.selected = ko.observable(2); 
    this.items = ko.observableArray([ 
     new Item(1, "one", this.selected), 
     new Item(2, "two", this.selected), 
     new Item(3, "three", this.selected) 
     ]); 
}; 

그런 다음, 바인드 같은 :

<ul data-bind="foreach: items"> 
    <li> 
     <input type="radio" name="items" data-bind="attr: { value: id }, checked: $root.selected" /> 
     <span data-bind="text: name"></span> 
    </li> 
</ul> 

http://jsfiddle.net/rniemeyer/zNkhR/