행마다 다른 라디오 버튼 목록 표시

Question

사람 목록이 있습니다. 각 사람마다 나는 진실/거짓 신분을 가지고 있습니다. 나는 이것이 사람마다 묶어지기를 바란다. 아래 바이올린을 확인하면 올바르게 바인딩되지만 내 라디오 버튼이 원하는대로 작동하지 않습니다. 각 행마다 고유 한 라디오 버튼 세트 (각 행마다 다른 이름)를 갖게하고 싶습니다.

예를 들면. 행 1을 클릭하면 참, 행 2를 클릭하면 거짓이됩니다. 허용되어야하지만 행 하나의 선택을 제거하기 위해 이름이 충돌합니다. 당신

http://jsfiddle.net/ef3fV/5/

<table width="300px;"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Status</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: people"> 
     <tr> 
      <td> 
       <span data-bind="text: Name"></span> 
      </td> 
      <td> 
       <input type="radio" name="Status" value="true" data-bind="checked: Status" /> 
       <input type="radio" name="Status" value="false" data-bind="checked: Status" /> 
      </td> 
      <td><button data-bind="click: $root.changeStatus">Change Status</button></td> 
     </tr> 
    </tbody> 
</table> 

function People(data) { 
    var self = this; 
    self.Name= data.Name; 
    self.Status = ko.observable(data.Status); 
} 

function PeopleViewModel(userId) { 
    var self = this; 

    self.people = ko.observable([ 
          { Name: 'Bert', Status: true }, 
          { Name: 'Charles', Status: true }, 
          { Name: 'Denise', Status: false } 
         ]); 
    self.changeStatus = function() 
    { 
     alert("Change " + this.Name + " to " + this.Status); 
    }; 
} 

ko.applyBindings(new PeopleViewModel()); 

Answer 1

몇 가지 감사합니다

• name 속성은 모든 사람에서 동일합니다. attr 바인딩을 사용하고 각 라디오 버튼 그룹 앞에 사람의 이름을 붙여서 변경할 수 있습니다.
• people은 observable이 아닌 observableArray이 될 것입니다.
• 기본 데이터 모델을 업데이트하려는 경우 각 사람의 Status 속성도 관찰 가능해야합니다.
• Status을 할당 한 value은 문자열이어야합니다.

  HTML :

  <table width="300px;"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Status</th> 
       </tr> 
      </thead> 
      <tbody data-bind="foreach: people"> 
       <tr> 
        <td> 
         <span data-bind="text: Name"></span> 
        </td> 
        <td> 
         <input type="radio" value="true" data-bind="attr: { name: Name + '-status' }, checked: Status" /> 
         <input type="radio" value="false" data-bind="attr: { name: Name + '-status' }, checked: Status" /> 
        </td> 
        <td><button data-bind="click: $root.changeStatus">Change Status</button></td> 
       </tr> 
      </tbody> 
  </table> 
  

  자바 스크립트 :

  function People(data) { 
      var self = this; 
      self.Name = data.Name; 
      self.Status = ko.observable(data.Status); 
  } 
  
  function PeopleViewModel(userId) { 
      var self = this; 
  
      self.people = ko.observableArray([ 
      { 
       Name: 'Bert', 
       Status: ko.observable('true') 
      }, 
      { 
       Name: 'Charles', 
       Status: ko.observable('true') 
      }, 
      { 
       Name: 'Denise', 
       Status: ko.observable('false') 
      }]); 
  
      self.changeStatus = function() { 
       alert("Change " + this.Name + " to " + this.Status()); 
       if (this.Status() === "true") { 
        this.Status('false'); 
       } else { 
        this.Status('true'); 
       } 
      }; 
  } 
  
  ko.applyBindings(new PeopleViewModel());​ 
  

  예 :여기

은 업데이트와 수정 된 코드입니다