knockoutjs를 사용하여 select에서 데이터를 개별적으로 바인딩하는 방법

Question

observableArray에서 선택 목록이 있습니다. 먼저 데이터를 선택하면 다음 선택에서 데이터를 바인딩합니다. 이것이 내 코드에서 보이는 것입니다.

HTML :

<tbody data-bind="foreach: Participants"> 
    <tr> 
     <td data-bind="text: Name"></td> 
     <td> 
      <select data-bind=" 
       options: $parent.AttendanceCodes, 
       optionsText: 'Text', 
       optionsValue: 'Value', 
       value:$parent.AttendanceCode, 
       optionsCaption: 'select', 
       event:{change: $parent.onchange_attendancecodes}"> 
      </select> 
     </td> 
     <td> 
      <select class="reason" data-bind="options: $parent.AbsenceReasons, 
      optionsText: 'Text', 
      optionsValue: 'Value', 
      value: $parent.AbsenceReason"></select> 
     </td> 
    </tr> 
</tbody> 

knockoutjs

var viewModel = function(data){ 
    var self = this; 

    self.AbsenceReasons = ko.observableArray([]); 
    self.AttendanceCodes = ko.observableArray(attendanceCodeList); 
    self.Participants = ko.observableArray(participantsData); 

    //event 
    self.onchange_attendancecodes = function(){ 
     self.AbsenceReasons.removeAll(); 
     self.AbsenceReasons(absenceReasonsList); 
    }; 
}; 

http://jsfiddle.net/comfreakph/xH8FU/18/

Answer 1

당신이 코드에서이 문제는 두 번째 열 선택의 모두 같은 "$에 바인딩이다 parent.AbsenceReasons "이므로 change 이벤트 처리기에서 self.AbsenceReasons를 변경하면 모든 두 번째 열 선택 사항은 바운드 대상이므로 변경됩니다.

이 솔루션은 매우 정직 :

1. 각 참가자는 자신의 "AbsenceReasons",
2. 두 번째 열은 각 개별 참가자의 AbsenceReasons에 결합해야 선택을해야
3. 및 change 이벤트 핸들러 만 특정 참가자의 부재 이유를 변경합니다.

jsFiddle