1

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>

ノックアウト

    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/

4

1 に答える 1

1

コードの問題は、2 番目の列の選択がすべて同じ「$parent.AbsenceReasons」にバインドされているため、changeイベント ハンドラーで self.AbsenceReasons を変更すると、2 番目の列の選択がすべて変更されることです。それが彼らが縛られているものです。

解決策は非常に簡単です。

  1. 各参加者には独自の「AbsenceReasons」が必要です。
  2. 2 番目の列の選択は、個々の参加者の AbsenceReasons にバインドする必要があります。
  3. イベント ハンドラーは、change特定の参加者の AbsenceReasons のみを変更します。

jsフィドル

于 2013-06-17T04:34:03.587 に答える