javascript - 将表绑定(bind)到 Knockout 集合时遇到问题

Question

我不明白为什么这些 Knockout 表绑定(bind)不起作用:

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 个文件都会显示，但第三个文件不会显示。我错过了什么？

Answer 1

你真的很接近。有两点需要指出:

1. Status 不是可观察对象，您正尝试使用 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