淘汰赛JS：可观察数组未更新，无法确定原因

Question

背景

我正在开发一个非常基本的应用程序，作为淘汰赛的学习练习。 在我的视图模型中，我有很多可观察的students 。 这个对象由很多student ，这是我的模型。 每个学生都有一组可观察的scores 。 scores数组由可观察的数字组成，这些数字被动态推送到scores数组。

上面的信息描述了我的意图。 不幸的是，有什么坏事，但我无法破译。 我的控制台日志显示，当我推送到数组时，分数数组中的值未更新。 我不清楚我的逻辑/方法哪里错了。 当我尝试更新scores`数组中的平均分数时，最明显的就是缺少更新。

我的内容以及控制台日志可以在以下位置访问： http : //jsbin.com/fehoq/45/edit

HTML

<button data-bind="click: addWork">Add New Assignment</button>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <!-- ko foreach: assignments -->
            <th><input data-bind="value: workName  + ' ' + ($index() + 1)"/></th>
            <!-- /ko -->
            <!--<th data-bind=>Overall Grade</th> -->
            <th>Class Grade</th>
        </tr>    
    </thead>
    <tbody data-bind="foreach: students">
        <tr>
          <td><input data-bind="value: fullName"/></td>  
            <!-- ko foreach: scores -->  
            <td><input data-bind="value: $data"/></td>
            <!-- /ko --> 
            <td><input data-bind="value: mean" /></td>
            <td><input type="button" value="remove" data-bind="click: $root.removeStudent.bind($root)". /></td>
        </tr>    
    </tbody>    
</table>

JS

请注意，下面的代码是相关的代码片段，而不是整个应用程序。

1.型号

var StudentModel = (function () {
    function StudentModel(fullName) {
        var _this = this;
        this.fullName = fullName;
        this.scores = ko.observableArray();
        this.mean = ko.computed(function (scores) {
            var n = 0;
            ko.utils.arrayForEach(_this.scores(), function (score) {
                n += score();
                console.log(n);
            });
            n = n / _this.scores().length;
            return n;
        });
    }

...

2.查看模型

function StudentsViewModel() {
    var _this = this;
    this.students = ko.observableArray([
        new Gradebook.Model.StudentModel("Jeff Smith"),
        new Gradebook.Model.StudentModel("Gandalf")
    ]);
    this.assignments = ko.observableArray([
        new Gradebook.Model.WorkModel("Math"),
        new Gradebook.Model.WorkModel("Reading")
    ]);
    this.addStudent = function () {
        this.students.push(new Gradebook.Model.StudentModel(""));
        this.updateRows();
    };
    this.addWork = function () {
        this.assignments.push(new Gradebook.Model.WorkModel("Assignment "));
        this.updateRows();
    };
    this.updateRows = function () {
        ko.utils.arrayForEach(_this.students(), function (student) {
            while (student.scores().length < _this.assignments().length) {
                student.scores.push(ko.observable(100));
            }
        });
    };
}

编辑

值得一提的是，我在SO上花费了相当多的时间研究此问题，但到目前为止，我所遇到的解决方案都没有对我有所帮助。

Answer 1

问题在于该value: $data绑定中的value: $data指的是可观察数组条目的未包装的，不可观察的值 ，而不是可观察的本身。

本质上，这使它成为单向绑定-它读取初始状态，然后再也不会更新。

从Knockout 3.0开始，您可以改用$rawData ：

<!-- ko foreach: scores -->  
  <td><input data-bind="value: $rawData"/></td>
<!-- /ko -->

从绑定上下文文档中：

$rawData

这是当前上下文中的原始视图模型值。 通常，这将与$ data相同，但是如果提供给Knockout的视图模型被包装在可观察对象中，则$ data将成为未包装的视图模型，而$ rawData将是可观察对象本身。

供参考： Knockout.js使用value:在foreach绑定字符串列表-不更新