信息:
我正试图通过构建一个简单的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是函数,需要调用。