knockout.js - How to refresh Footable that is bound with Knockout?

Question

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

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.

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.

Answer 1

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;
}

Usage:

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

See changes in http://plnkr.co/edit/Gr4DefuWcPAcVBHRyIvJ?p=preview