采用淘汰赛可观测阵列

问题描述：

我试图重新实现从Udacity的JavaScript设计模式课程的学生出勤例如数据绑定复选框。到目前为止，我已经设法重新创建了表格，并正确地填充了一些学生数据，但是当我更改复选框值时，它并未在模型中更新。采用淘汰赛可观测阵列

例如，当我在输出显示初始出勤数据，而不是对应的复选框的当前状态在控制台显示

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);

答

从敲除documentation

关键点：一个observableArray轨道哪些对象是在阵列中，不是这些物体的状态

在你的情况，这意味着days应该是无法观测阵，但可观的阵列。

例如，你可以添加新的视图模型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

采用淘汰赛可观测阵列

相关推荐