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. Calli

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