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

We have a table which one show the users with the help of jquery plugin table. When We are using this control with knockout and we iterate the table with a observable Array everything is fine with the help of a handler developed for us:

我们有一个表,在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");
        }
    };

and in the template we do binding in this way:

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

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

The problem happen when our MyListObservable is a computed value, which one is recalculated in function of other check observable. In this case the behaviour of the control is strange and always add elements to the table but when the observable array remove information this one dont update the index of the table and theirs values. I have tried without success:

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

1º RemoveAll the values of the array before reload the array. 2º Force the updateAll the table just after of reload of computed value $(element).trigger('updateAll'). 3º Get the value of the computed and assign his value to other observable array and iterate with this new array.

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

Obviously the problem has relation with knockout and maybe other users had the same problem. Any idea? Thanks in advance.

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

1 个解决方案

#1

That's really strange. I have no idea how it works with observable array but there is one strange thing: setTimeout - what is the purpose of this? It's called asynchronously that means that ko.dependencyDetection is not able to track dependency on valueAccessor() (it works ONLY synchronously). So, according to this your binding invokes init method and that's it. It never calls update (only during initialization).

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

I propose this fix:

我建议这个修复:

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.: working example: http://plnkr.co/edit/IW3Gp5NXB1lyLIRWseKM?p=preview

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

#1