如何使用knockoutjs在select中单独绑定数据

Question

我有一个从observableArray中选择的列表，当我在第一次选择数据时，它将在下一个select中绑定数据。这就是我的代码中的样子。

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事件处理程序仅更改特定参与者的AbsenceReasons。

jsFiddle