如何刷新与淘汰赛绑定的Footable? [英] How to refresh Footable that is bound with Knockout?

问题描述

我创建了一个解决问题的插件: http://plnkr.co/edit/2UMTW2p0UAWPzJ0d0m5F?p = info

I have created a plunk that demostrates my issue: http://plnkr.co/edit/2UMTW2p0UAWPzJ0d0m5F?p=info

我有一个使用Knockout.js ForEach绑定的表.不能在正常位置调用.footable()初始化程序.我为footable创建了一个自定义活页夹，并将其命名为$(element).footable();.这将导致footable初始化，但是由于这发生在自定义绑定程序的初始化中，因此之后添加了更多行，因此表看起来不正确.我在客户资料夹中有一个更新功能，但是我不知道要为valueAccessor设置什么，以便在正确的时间调用它. (或根本没有)理想情况下，我希望它使用与构建表相同的可观察数组.

I have a table that is bound using the Knockout.js ForEach. Calling the .footable() initializer doesn't work by calling it in the normal location. I created a custom binder for footable and will call $(element).footable();. This causes the footable to initialize, but because this happens in the init of the custom binder, more rows are added after and so the table doesn't look right. I have an update function in the customer binder, but I can't figure out what to set for the valueAccessor so it gets called at the correct time. (or at all) Ideally I'd want it to use the same observable array that is used to build the table.

我将afterRender添加到ForEach中，这有所帮助，但这要求我在ViewModel中添加合适的逻辑.

I add afterRender to the ForEach and that helped some, but that requires that I add footable logice in my ViewModel.

因此，我真正想做的事情是弄清楚我需要使用什么属性，以便自定义绑定程序的更新回调起作用，因此我可以将所有适用的逻辑封装到自定义绑定程序中.

So, what I'd really like to do it figure out what property I need to use so the update call back of the custom binder works and so I can encapsulate all of the footable logic into the custom binder.

推荐答案

一种方法是用可靠的绑定替换foreach.页脚绑定将侦听observableArray中的更改，并自动添加foreach绑定

One way is to replace foreach with footable binding. The footable binding will listen to changes in the observableArray and also automatically add the foreach binding

ko.bindingHandlers.footable = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        $(element).closest("table").footable();
    },
    update: function(element, valueAccessor) {  
        //this is called when the observableArray changes
        //and after the foreach has rendered the contents       
        ko.unwrap(valueAccessor()); //needed so that update is called
        $(element).closest("table").trigger('footable_redraw');
    }
}

ko.bindingHandlers.footable.preprocess = function(value, name, addBindingCallback) {
    //add foreach binding
    addBindingCallback('foreach', '{ data: ' + value +  '}');
    return value;
}

用法:

<tbody data-bind = "footable: items, delegatedHandler: 'click'" >

查看 http://plnkr.co/edit/Gr4DefuWcPAcVBHRyIvJ?p=preview

这篇关于如何刷新与淘汰赛绑定的Footable?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！