无法将表绑定到 Knockout 集合

Question

我不明白为什么这些 Knockout 表绑定不起作用：

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>

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

Answer 1

你真的很亲密。需要指出的两个主要事项：

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

我根据您的原始来源整理了一个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 成员可观察。 此外，您的第三个 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

});