knockout.js - 淘汰表排序器缓存行

Question

我已经为这个问题头疼了大约 5-6 个小时。

我将 tablesorter 与 knockoutjs 结合使用。我的问题是使用 tablesorter 时，行被缓存，当我尝试删除行时，它们永远不会消失。我创建了一个解释问题的jsfiddle。您可以在小提琴中看到我的说明。

http://jsfiddle.net/a8jUj/29/

我看到很多文章都在讨论这类问题，但他们都说我们需要在更改表后调用触发器更新，但这对我不起作用。

 $("#list1").trigger("update");

请让我知道我做错了什么。

谢谢。

Answer 1

我认为您遇到的问题是表本身不是空的，或者在更新时只包含一行。清除 tbody，然后添加您的行（更新的演示）：

self.resetUsers = function (data, event) {
    self.users.removeAll();

    $("#list1").find('tbody').empty();

    self.users.push(new User({
        name: "Sidney",
        age: 26,
        active: 1
    }));

    $("#list1").trigger("update");
};

Answer 2

问题是.tablesorter插件不对self.users模型中的数组进行排序，它只对实际<tr>元素进行排序。您的列排序器必须observableArray.sort使用自定义比较器作为参数显式调用方法：

self.sortCol = function(colName, event) {

    // get sorting direction
    var th = event.target;
    th.sortDir = (th.sortDir == 'asc' ? 'desc' : 'asc');

    // array item comparator
    function comp(a, b){
        // get values to compare
        var av = a[colName](), bv = b[colName]();
        // compare using current direction
        if (th.sortDir == 'asc') {
            return av == bv ? 0 : av > bv ? 1 : -1;
        } else {
            return av == bv ? 0 : av < bv ? 1 : -1;
        }
    }
    // do sort
    self.users.sort(comp);
}

工作小提琴：http: //jsfiddle.net/a8jUj/31/

PS仅举个例子，我已经.sortCol()通过函数绑定以获得对事件对象的访问权限。您可以重写模型以将当前排序参数存储在模型属性中。