淘汰赛数组的长度始终为 0

Question

var viewModel = {
    foos: ko.observableArray([]);
}

var foo = function () {
    this.Prop1 = ko.observable,
    this.Prop2 = ko.observable
};

$.get("/someroute/", "", function(data) {
    for(var i = 0; i< data.length; i++) {
        var f = new foo();
        f.Prop1 = data.Prop1;
        f.Prop2 = data.Prop2;
        viewModel.foos.push(f);
    }
    ko.applyBindings(viewModel);
});

数据从 get 请求加载并循环遍历数据，但 viewModel.foos 保持为 [0]。

Answer 1

您的代码存在一些问题：

0) viewModel 的定义不正确。应该是：

foos: ko.observableArray([])

不带分号;。

1) 您没有在foo 的定义中正确定义可观察对象。应该是：

this.Prop1 = ko.observable()

所以缺少括号()。

2) 请记住前面的观点，这是您将值应用于字段的方式：

var f = new foo();
f.Prop1(data.Prop1);

3) JavaScript 不会缓存数组的长度，因此每当您在循环中使用 .length（length 不是属性，实际上是 getter）时，都会在每个循环中评估长度迭代。你应该使用：

var l = data.length;
for(var i = 0; i< l; i++) {

4) ko.applyBindings 用于将视图模型绑定到文档。我不确定你为什么在get 请求的末尾使用它，但是如果你想多次使用get，那么这肯定会抛出异常。特别是因为您的 get 没有修改 DOM。我认为您应该在 $(document).ready(...) 部分的某处运行 ko.applyBindings。

5) 最后，即使有所有这些错误，您的代码也应该可以正常工作。我的意思是看相关部分：

for(var i = 0; i< data.length; i++) {
    // some other code
    viewModel.foos.push(f);
}

无论f 是什么，它仍然被推送到viewModel 的foos 数组中。如果你在那之后得到foos 0 的长度，那么这意味着data.length 是0（或者我不明白[0] 在你的问题中是什么意思）。没有其他解释。见this jsFiddle。

6) 请记住，您使用viewModel.foos() 访问实际数组。因此viewModel.foos.length 不正确。正确的长度是viewModel.foos().length。