表中的tableSorter在knockout中具有迭代的计算值

时间:2015-05-13 15:15:45

标签: knockout.js tablesorter

我们有一个表,在jquery插件表的帮助下向用户显示。当我们使用带有knockout的这个控件时,我们用一个可观察的数组迭代表,在为我们开发的处理程序的帮助下,一切都很好:

ko.bindingHandlers.sortTable = {
        init: function(element, valueAccessor) {
            var iden=$(element).attr("id");
            setTimeout( function() {
                if($(element).hasClass('tablesorter')){
                    ko.utils.unwrapObservable(valueAccessor())
                    $(element).trigger('updateAll');
                }else{
                    $(element).tablesorter({
                        widgetOptions:{filter_external : '#'+iden+"_search"}
                        //headers: {0: {sorter: false}}
                    }).tablesorterPager({container: $('#'+iden+"_pager")});
                }
            }, 0);
        },
        update: function(element, valueAccessor) {
           $(element).trigger("update");
        }
    };

在模板中我们以这种方式进行绑定:

<tbody data-bind="foreach: MyListObservable">

当MyListObservable是一个计算值时会发生问题,在其他check observable函数中重新计算一个值。在这种情况下,控件的行为很奇怪,并且总是向表中添加元素,但是当observable数组删除信息时,这个不更新表的索引和它们的值。我试过没有成功:

1º在重新加载数组之前删除所有数组的值。 2º在重新加载计算值$(element).trigger('updateAll')之后强制执行updateAll表。 3º获取计算值并将其值分配给其他可观察数组并使用此新数组进行迭代。

显然问题与淘汰有关,也许其他用户也有同样的问题。 任何的想法? 提前谢谢。

1 个答案:

答案 0 :(得分:1)

真的很奇怪。我不知道它如何与可观察数组一起工作,但有一个奇怪的事情:setTimeout - 这是什么目的?它被异步调用,这意味着ko.dependencyDetection无法跟踪对valueAccessor()的依赖(它只能同步工作)。所以,根据这个,你的绑定会调用init方法,而这就是它。它从不调用update(仅在初始化期间)。

我提出这个问题:

ko.bindingHandlers.sortTable = {
init: function(element, valueAccessor) {
    var iden=$(element).attr("id");
    if($(element).hasClass('tablesorter')){
        $(element).trigger('updateAll');
    }else{
        $(element).tablesorter({
            widgetOptions:{filter_external : '#'+iden+"_search"}
            //headers: {0: {sorter: false}}
        })//.tablesorterPager({container: $('#'+iden+"_pager")});
    }
},

update: function(element, valueAccessor) {
  ko.utils.unwrapObservable(valueAccessor()); // adds dependency, so when associated observable value is changed "update" method will be triggered
  setTimeout(function() {
    $(element).trigger("update");
  }, 0);
}

};

P.S。:工作示例:http://plnkr.co/edit/IW3Gp5NXB1lyLIRWseKM?p=preview