Javascript 将表绑定到淘汰集合时出现问题

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

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

});

<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>

HTML:

$(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

});

<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>

表1
文件：
表2
文件：

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

你真的很接近。需要指出的两件主要事情：

状态不是可观察的，您正试图使用

text:Status（）

将其展开

您正在将新的

FileObject

推送到一个展开的数组中，这意味着您完全绕过了可观察对象。将新项目直接推到可观察数组中，您的运气会更好

我根据你的原始资料整理了一份报告

具体而言，这：

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

应该是：

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

你真的很接近。需要指出的两件主要事情：

状态不是可观察的，您正试图使用

text:Status（）

将其展开

您正在将新的

FileObject

推送到一个展开的数组中，这意味着您完全绕过了可观察对象。将新项目直接推到可观察数组中，您的运气会更好

我根据你的原始资料整理了一份报告

具体而言，这：

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

应该是：

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

你真的很接近。需要指出的两件主要事情：

状态不是可观察的，您正试图使用

text:Status（）

将其展开

您正在将新的

FileObject

推送到一个展开的数组中，这意味着您完全绕过了可观察对象。将新项目直接推到可观察数组中，您的运气会更好

我根据你的原始资料整理了一份报告

具体而言，这：

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

应该是：

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

你真的很接近。需要指出的两件主要事情：

状态不是可观察的，您正试图使用

text:Status（）

将其展开

您正在将新的

FileObject

推送到一个展开的数组中，这意味着您完全绕过了可观察对象。将新项目直接推到可观察数组中，您的运气会更好

我根据你的原始资料整理了一份报告

具体而言，这：

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

应该是：

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

---

在HTML中，您试图数据绑定

status（）

，但

status

不是可见的。一种方法是使

FileObject

成员可见。 另外，由于语法错误，第三个

FileObject

从未显示。它不应该是

filesModel.myFiles（）.push

，而应该是

filesModel.myFiles.push

看

---

在HTML中，您试图数据绑定

status（）

，但

status

不是可见的。一种方法是使

FileObject

成员可见。 另外，由于语法错误，第三个

FileObject

从未显示。它不应该是

filesModel.myFiles（）.push

，而应该是

filesModel.myFiles.push

看

---

在HTML中，您试图数据绑定

status（）

，但

status

不是可见的。一种方法是使

FileObject

成员可见。 另外，由于语法错误，第三个

FileObject

从未显示。它不应该是

filesModel.myFiles（）.push

，而应该是

filesModel.myFiles.push

看

---

在HTML中，您试图数据绑定

status（）

，但

status

不是可见的。一种方法是使

FileObject

成员可见。 另外，由于语法错误，第三个

FileObject

从未显示。它不应该是

filesModel.myFiles（）.push

，而应该是

filesModel.myFiles.push

看

---

---

创建一个JSFIDLE演示问题，应该是一个您可能忽略的简单语法错误创建一个JSFIDLE演示问题，应该是一个您可能忽略的简单语法错误创建一个JSFIDLE演示问题，应该是一个简单的语法错误，您可能忽略了创建一个JSFIDLE来演示这个问题，应该是一个简单的语法错误，您可能忽略了一个简单的语法错误，unrapped array就是这个问题-谢谢@Ross！（状态信息只是我草率的复制/粘贴-与问题无关）奖金：那么我是做

data bind=“foreach:myFiles”

还是

data bind=“foreach:myFiles（）”

？这都无关紧要——在这种情况下，我认为这并不重要。测试我的内存，

myFiles

在从更改

myFiles

触发更改事件后，

foreach

调用（并在需要时展开）。不过，我还是得四处看看才能确定。@Yarin，如果你想在视图中绑定console.log（myFiles（））前后看到它的区别的话。具体地看一下observable的订阅者，这就是您确保已将DOM元素注册为订阅者的地方！（状态信息只是我草率的复制/粘贴-与问题无关）奖金：那么我是做

data bind=“foreach:myFiles”

还是

data bind=“foreach:myFiles（）”

？这都无关紧要——在这种情况下，我认为这并不重要。测试我的内存，

myFiles

在从更改

myFiles

触发更改事件后，

foreach

调用（并在需要时展开）。不过，我还是得四处看看才能确定。@Yarin，如果你想在视图中绑定console.log（myFiles（））前后看到它的区别的话。具体地看一下observable的订阅者，这就是您确保已将DOM元素注册为订阅者的地方！（Th）