Question

我正在尝试重新实现Udacity JavaScript Design Patterns课程中的学生出勤示例。到目前为止，我已经设法重新创建表并正确填充了一些学生数据，但是当我更改复选框值时，它会在模型中更新。

例如，当我显示

时

    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

使用Knockout Observable Arrays的数据绑定复选框

1 个答案: