麻烦绑定表到淘汰赛收集

Question

我不明白为什么这些淘汰赛表绑定不工作：

的Javascript：

$(function() { 

    var FileObject = function(id, name) { 
     this.id = id; 
     this.name = name; 
    }; 

    var FilesModel = function() { 

     this.filesSelected = ko.observable(false); 
     this.myFiles = ko.observableArray([new FileObject(1, 'test_1')]); 
     this.myFiles.push(new FileObject(2, 'test_2')); 
    }; 

    var filesModel = new FilesModel(); 
    window.filesModel = filesModel; 
    ko.applyBindings(filesModel); 

    filesModel.myFiles().push(new FileObject(3, 'test_3')); // This never shows 

    alert(filesModel.myFiles().length); // Shows 3 items 

}); 

HTML：

<h3>TABLE 1</h3> 
<table> 
<tbody data-bind="foreach: myFiles"> 
    <tr> 
     <td>FILE:</td> 
     <td data-bind="text: name"></td> 
    </tr>  
</tbody> 
</table> 

<h3>TABLE 2</h3> 
<table> 
<tbody data-bind="foreach: myFiles()"> 
    <tr> 
     <td>FILE:</td> 
     <td data-bind="text: name"></td> 
    </tr>  
</tbody> 
</table> 

在这两个表中，前两个文件将显示，但第三个文件不显示。我错过了什么？

Answer 1

你是真的关闭。需要指出的两点主要有以下几点：

1. 状态不是可观察的，您试图用text: status()解开它。
2. 您正在将新的FileObject推入一个未包装的数组中，这意味着您完全忽略了可观察值。将新项目直接推入可观察数组中，你会有更好的运气。

我已经放在一起jsbin example根据您的原始来源。

具体做法是：

filesModel.myFiles().push(new FileObject(3, 'test_3')); // This never shows 

应该是：

filesModel.myFiles.push(new FileObject(3, 'test_3')); // Now it does 

Answer 2

在你的HTML，你试图将数据绑定status()，但status不是一个观察的。一种方法是让你的成员可观察到。 另外，您的第三个FileObject从未显示，因为您的语法错误。取而代之的filesModel.myFiles().push，它应该只是filesModel.myFiles.push

见updated fiddle

$(function() { 
    var FileObject = function(id, name, size, status, progress) { 
     this.id = ko.observable(id); 
     this.name = ko.observable(name); 
     this.status = ko.observable(status); 
    }; 

    var FilesModel = function() { 

     this.filesSelected = ko.observable(false); 
     this.myFiles = ko.observableArray([new FileObject(1, 'test_1')]); 
     this.myFiles.push(new FileObject(2, 'test_2', 3, 'status')); 
    }; 

    var filesModel = new FilesModel(); 
    window.filesModel = filesModel; 
    ko.applyBindings(filesModel); 

    filesModel.myFiles.push(new FileObject(3, 'test_3')); // This never shows 

    alert(filesModel.myFiles().length); // Shows 3 items 

});