Question

对此有何帮助？我在使用时得到重复的行： KnockoutJs：http://knockoutjs.com/和jquery.tablesorter插件：（http://tablesorter.com/docs/）。

基本上，第一次加载......它的效果很好。但是如果我在排序表之后替换或更改绑定到挖空数据的数据......我开始获得重复的行。每个人似乎都在创建和维护自己的行集。

Answer 1

您可以清除绑定到表格的数组，例如
```
YourViewModel.list.clearAll();
```
清除表格主体
```
$(".gridtable").find('tbody').empty();
```
更新表格分类器
```
$(".table_border").trigger("update");
```

因此，您的数据加载功能可能如下所示

self.Load = function () {
    self.list.removeAll();
    $(".gridtable").find('tbody').empty();
    $.ajax('/List', {
        data: $('#yourformname').serializeArray(),
        global: true,
        contentType: "application/json; charset=utf-8",
        type: "Get", contentType: "application/json",
        success: function (result) {
            var mappedList = $.map(result, function (item) { return new List(item) });
            self.List(mappedList );

            $(".table_border").trigger("update");

        }
    });
};

Answer 2

我认为有两个问题相互促进。首先，你有一个可观察的数组，但是数组中的项目不是ko.observable，它们只是常规的JS对象。因此，如果更改表中的项值，则视图模型不会更新。其次我认为你应该放弃tablesorter插件，只需在knockout中对可观察列表进行排序，让绑定为你工作。您可以找到用于对ko.observable数组here进行排序的信息。

Answer 3

我有一个解决方案。虽然它可能很慢，但它确实有效。解决方案是使用模板并使用jquery。 each代替foreach。这是html中的代码：

 // replace this div with the table
 <div id="peopleTemplateContainer"  data-bind="{template: 'peopleTemplate' }">

     <script id="peopleTemplate" type="text/html">
     <table id="dataGrid" border="1">
       <thead>
        <tr>
        <th><b>Sortable Header (sort click me)</b></th>
        </tr>
       </thead>
       <tbody >
          {{each(index,compliance) people()}}
        <tr >
            <td >${data}</td>
        </tr>
       {{/each}}
       </tbody>
     </table>
     </script>

KnockoutJs与Jquery.tablesorter - 导致重复行

3 个答案: