背景

我正在开发一个非常基本的应用程序,作为淘汰赛的学习练习。 在我的视图模型中,我有很多可观察的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上花费了相当多的时间研究此问题,但到目前为止,我所遇到的解决方案都没有对我有所帮助。

===============>>#1 票数: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绑定字符串列表-不更新

  ask by Jefftopia translate from so

未解决问题?本站智能推荐:

1回复

淘汰赛JS:如何动态更新 等于 计数?

信息: 我正在尝试通过构建一个简单的成绩簿应用程序来学习使用Knockout进行Web开发。 它仍处于开发的初期,但是我遇到了一个障碍,即将每个<tr> <td>匹配到<th>元素中的列。 到目前为止,我没有添加行或标题列的问题,但是当我尝试更新每行
1回复

淘汰赛JS:计算平均回报NaN?

背景: 我正在构建我的第一个网络应用,即成绩簿。 我正在尝试从一组可观察的scores计算平均scores 。 平均值称为mean是一个可观察的对象。 mean和scores均属于模型。 我只是不确定这里是什么问题。 我在打印时注意到控制台的mean打印的值是NaN或代码块。
1回复

淘汰赛JS:indexOf始终返回-1?

背景 我正在尝试构建一个成绩簿应用程序,主要是作为学习练习。 目前,我有两个模型,一个学生和一个作业。 我决定将所有与分数相关的信息存储在学生内部,而不是每次分配作业。 也许有更好的方法。 无论如何,我已经有了每个学生的平均分数,即她在课堂上的成绩。 我现在要计算每个作业的平
1回复

淘汰赛:indexOf返回-1时更加困惑

背景 我试图在第二个数组B中检查数组A中是否存在值。每个值都是一个可观察的数字。 每个可观察的数字都包含在一个可观察的数组中。 比较总是返回-1,这已知是不正确的(只要A和B中的值重叠)。 因此,我的逻辑或语法有问题,但我无法弄清楚在哪里。 JSBin (完整项目): ht
1回复

淘汰赛JS:传递给Writeable Compute的值返回[object Object]?

背景 在进行中的学习项目时,我注意到我需要一个可写的计算函数来解决我面临的问题。 这是一个皮包骨头的问题:我正在尝试1)从成绩簿中删除用户指定类型的作业指定分数的数量2)。 用户输入上面的值,然后单击dropLowestScores按钮。 然后,代码将最低分数添加到名为“最低”的
1回复

将jQuery事件函数应用于新的Knockout.js数组元素

我有一个带有products列表的Knockout.js视图模型,这些products由ASP.NET Web API调用填充: 当我调用listProducts ,每个元素listProducts成功添加到ff中。 HTML <ul> : 但是,当添加每个项目时,
1回复

Knockout JS:`hasFocus`总是有焦点

背景 我有一个单一的视图模型和两个模型。 对于每个模型,我试图将名称属性绑定到dom。 每个名称都有默认值,但我希望用户能够编辑这些值。 在Knockout文档之后,我使用了hasFocus方法。 我的问题是,点击后,我可以编辑,但当我点击时,焦点不会改变,我的阵列不会更新。 看
1回复

访问Knockout JS中的普通JS数组内的observable的值?

背景 我有一个普通的JS数组,最初是空的。 我稍后用值填充它。 发送给它的值是可观察到的数字。 稍后,我想将这些值与另一个可剔除的可观察数组中的值进行比较。 我的问题是,每当我在数组循环中传递当前项目的索引并传递该索引值(一个数字!)时,该数组就会返回一个函数。 要了解一个想法,
1回复

Knockout JS:observableArray.splice(0)没有克隆数组?

背景 我似乎无法失去对我试图克隆的原始数组的引用。 为了具体说明我的问题,假设我有以下内容。 JSBin : http : //jsbin.com/fehoq/168/edit 我的dropLowestScores方法然后打算在scores数组中找到两个最低值, 复制
1回复

淘汰赛可观察阵列未更新

使用Knockout.JS 3.0,我试图创建一个可观察的数组,然后在我的SelectedCustomer.subscribe函数中更新该数组。 我的变量notes可以很好地加载,这是它在控制台日志中返回的内容:[Array [7]],但是当我记录我的observableArray notes