Данные привязки Флажки с использованием нокаутных наблюдаемых массивов

Question

Я пытаюсь переопределить пример посещаемости ученика из курса шаблонов проектирования JavaScript Udacity. До сих пор мне удалось воссоздать таблицу и правильно заполнить ее некоторыми данными о студенте, однако она появляется, когда я изменяю значение флажка, которое не обновляется в модели.

Например, когда я отобразить

debugVM.studentList()[0].days(); 

в консоли выход отображает начальные данные посещаемости вместо текущего состояния флажков. JSFiddle для этого можно найти here.

index.html

<table> 
    <thead> 
    <tr> 
     <th>Student</th> 
     <!-- ko foreach: attendance --> 
     <th data-bind="html: $data"></th> 
     <!-- /ko --> 
    </tr> 
    </thead> 
    <tbody data-bind="foreach: studentList"> 
    <tr> 
     <td data-bind="html: name, click: $parent.debugStudent"></td> 
     <!-- ko foreach: days --> 
     <td> 
     <input type="checkbox" data-bind="value: $data, checkedValue: $data, checked: $data" /> 
     </td> 
     <!-- /ko --> 
    </tr> 
    </tbody> 
</table> 

app.js

var Student = function(student){ 

    this.name = ko.observable(student.name); 
    this.days = ko.observableArray(student.days); 
}; 


var ViewModel = function() { 
    var self = this; 

    this.attendance = ko.observableArray([1,2,3,4,5,6,7,8,9,10,11,12]); 
    this.studentList = ko.observableArray([]); 

    students.forEach(function(student) { 
    self.studentList.push(new Student(student)); 
    }); 

    self.debugStudent = function() { 
    console.log(self.studentList()[0].days()); 
    }; 
}; 
var debugVM = new ViewModel(); 

ko.applyBindings(debugVM); 

Answer 1

От нокаута documentation

Ключевой момент: observableArray дорожки, какие объекты находятся в массиве, не состояние этих объектов

В вашем случае это означает, что days не должен быть наблюдаемым массивом, а массивом наблюдаемых.

Например, вы можете добавить новый ViewModel Day:

var Day = function(isChecked) { 
    this.isChecked = ko.observable(isChecked); 
} 

И установить days свойство, как этот

this.days = []; 
for (var i = 0; i< student.days.length; i++) { 
    this.days.push(new Day(student.days[i] == 1)); 
} 

См working fiddle