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

问题描述

我创建了一个 plunk 来演示我的问题:http://plnkr.co/edit/2UMTW2p0UAWPzJ0d0m5F?p=信息

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

我有一个使用 Knockout.js ForEach 绑定的表.通过在正常位置调用 .footable() 初始化程序不起作用.我为footable 创建了一个自定义的活页夹，并将调用$(element).footable();.这会导致footable 初始化，但因为这发生在自定义活页夹的init 中，之后添加了更多行，因此表格看起来不正确.我在客户绑定器中有一个更新函数，但我不知道要为 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 中添加footable logice.

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.

推荐答案

一种方法是用footable 绑定替换foreach.footable 绑定会监听 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

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