Knockout JS:如何动态更新<td>计数等于<th>计数

Knockout JS: How to dynamically update <td> count to equal <th> count?

本文关键字：gt lt 计数 th td JS 动态 更新 Knockout 何动态      更新时间：2023-09-26

信息：

我正试图通过构建一个简单的gradebook应用程序来学习Knockout的网络开发。它还处于开发的早期阶段，但我遇到了一个障碍，即在每个<tr>中获取<td>以匹配<th>元素中的列。到目前为止，我添加行或头列没有问题，但当我试图更新每一行，使其具有与表标题相同的编号或列时，我会得到奇怪的行为。

请参阅此处的示例：http://jsbin.com/fehoq/2/edit

看起来我得到了新的<td>，但我的<input>元素丢失了，它们的空字符串值也丢失了！

注意：我使用typescript生成了javascript。我认为这不应该成为一个问题。

相关脚本：

来自我的型号：

addScore = function(score){
   this.scores.push(score);
}

从我的观点模型：

updateRows = function(){
    for(var i=1;i<this.students.length;i++){
        while(this.students[i].scores.length<this.assignments.length){
            this.students[i].addScore("");
        }
    }
}

注意，赋值是一个可观察到的数组；工作；对象，而学生是学生对象的可观察阵列"分数"；也是属于每个学生对象的可观察数组。

编辑：

看起来我的updateRows（）方法什么都没完成。我不知道该怎么称呼它。

foreach应该是父元素，因为在您的情况下这是不可能的，您应该使用注释表示法：http://jsbin.com/wideyeku/2/edit?html，js，输出

<thead>
        <tr>
          <th>Name</th>
          <!-- ko foreach: assignments -->
            <th><input data-bind="value: workName"/></th>
          <!-- /ko -->
        </tr>    
</thead>

更新：http://jsbin.com/wideyeku/4/edit?js，控制台，输出我发现你的代码中有一些逻辑错误：

首先，this在javascript中是可变的，所以在模型中保留对它的引用：

function StudentsViewModel() {
              var self = this;

然后更正您的更新行函数：

this.updateRows = function () {
                    ko.utils.arrayForEach(this.students(), function(student){
                      while(student.scores().length < self.assignments().length){
                        student.scores.push("");
                      }
                    })
                };

永远不要忘记observableArrays是函数，需要调用。

相关文章：