Javascript 敲除数组绑定只工作一次

我正在编写一个文件上传代码，目前只在Chrome和Firefox中使用。它允许用户拖放上传的文件。上载进度显示在网格中

这是html

<form id="fileUploadForm" action="home/upload" method="post" enctype="multipart/form-data">
    <input type="file" id="fileselect" name="files" multiple="multiple" />
    <div id="filedrag">Drop files here</div>
    <button type="submit" id="submitbutton">Upload Files</button>
</form>

<table class="datatable" data-bind="visible:files().length>0">
    <thead>
        <tr>
            <th>Name</th>
            <th>Status</th>
            <th>Upload progress</th>
            <th>Progress bar</th>
        </tr>
    </thead>
    <tbody data-bind="foreach:files">
        <tr>
            <td data-bind="text:name"></td>
            <td data-bind="text:status"></td>
            <td data-bind="text:percentUploaded"></td>
            <td>
              <progress max="100" data-bind="attr: {value:percentUploaded}"></progress>
              <span data-bind="text:$root.files().length"></span></td>
        </tr>

    </tbody>
</table>

<pre data-bind="text: ko.toJSON($data.files, null, 2)"></pre>

当我拖放一组文件时，一切正常。但是，当我拖放另一个集合时，文件数组会更新，但网格不会显示其他行

然而，当我拿出这一块HTML5标记时，一切都很好：

<progress max="100" data-bind="attr: {value:percentUploaded}"></progress>

我已经创建了fiddle（），但它还有其他问题-1）拖放fiddle只会打开文件（不知道为什么）2）在拖放文件时，文件会被提交，但是没有服务器端代码可以用于JSFIDLE表单发布

我在另一个例子中尝试了使用进度条，但没有这个问题

有什么想法吗

---

非常感谢

您是否已将进度条设置回0？您的JSFIDLE为我抛出了一个错误（在Chrome中）-您需要在+按钮上绑定到

$parent.incrementPctCounter

。更新：抱歉，我上次的更改没有在JSFIDLE中更新。我现在已将链接更改为工作代码。@Gabber-不会数据绑定=“attr:{value:percentUploaded}将进度条设置为其具有的任何值。注意：网格中的每一行都有一个进度条，它不是所有内容的通用条。您能否制作一个小提琴，再现您的问题，但代表您的代码？向我们提供与您的问题不同的代码并不能真正帮助我们理解问题。

<progress max="100" data-bind="attr: {value:percentUploaded}"></progress>