麻煩綁定表到淘汰賽收集

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 

});