带有 Jquery.tablesorter 的 KnockoutJs - 导致重复行答案

【问题标题】：KnockoutJs with Jquery.tablesorter - Causing Duplicating Rows带有 Jquery.tablesorter 的 KnockoutJs - 导致重复行
【发布时间】：2013-10-08 22:24:23
【问题描述】：

http://jsfiddle.net/nalberg/E3nBu/4/

对此有什么帮助吗？使用时我得到重复的行： KnockoutJs：http://knockoutjs.com/ 和 jquery.tablesorter 插件：(http://tablesorter.com/docs/)。

基本上，第一次加载所有内容时...效果很好。但是如果我在对表格进行排序后替换或更改绑定到剔除数据的数据......我开始得到重复的行。每个人似乎都在创建和维护自己的行集。

【问题讨论】：

标签： jquery knockout.js tablesorter

【解决方案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");

        }
    });
};

【讨论】：

【解决方案2】：

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

【讨论】：

在我的示例中（我会考虑摆弄一下）我从不更改数组中的对象，只更改哪些项目是可观察数组所覆盖的数组的成员。通过 KO 排序是一个好主意，但要像 tableSorter 那样实现它需要很多代码。
请张贴你的小提琴。在 Knockout 中排序很容易完成。
实现 tableSorter 的所有功能，例如能够对任意列进行排序（如果我有几十列怎么办？），使用 shift+click 同时对多列进行排序，自定义排序算法等。会有很多代码。可以为排序结果创建一个计算出的 observable，但要容纳所有这些将是大量的代码。我知道如何用 Knockout 解决这个问题（笨拙地），我想知道如何用 tableSorter 解决这个问题。
您实际上有两个不同的脚本试图同时控制 DOM 中的内容。我能想到的唯一其他建议是使用带有淘汰赛剑道绑定的 Kendo UI 网格并使用它的排序功能。
另请参阅此 SO 帖子stackoverflow.com/questions/9703647/… 了解某些方向

【解决方案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>

【讨论】：