2

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.

Jeff
  • 2,728
  • 3
  • 24
  • 41

1 Answers1

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

LostInComputer
  • 15,188
  • 4
  • 41
  • 49
  • That is a really nice solution and it's exactly what I needed! Here's the documentation for preprocess for other people that will need it. (http://knockoutjs.com/documentation/binding-preprocessing.html) – Jeff Dec 30 '13 at 16:07
  • I ran into a bit of a snag when using this solution when I tried to do an example with a list of Tasks where each Task can contain a list of Tasks. I created a new question because I think this is still the correct solution for most scenarios. http://stackoverflow.com/q/20849400/2033294 – Jeff Dec 30 '13 at 23:39
  • This is the correct answer. The issue I'm having is due to Footable redrawing, not anything to do with this answer. If you're savy with Footable, I'd really appreciate if you could take a look as to why the redraw is causing problems. – Jeff Dec 31 '13 at 18:52
  • Unfortunately, I don't know too. The Footable source code is quite long – LostInComputer Jan 03 '14 at 15:16
  • No worries. You should check out http://stackoverflow.com/a/20893980/2033294. It's an answer to another of my questions and builds upon your answer here. – Jeff Jan 03 '14 at 16:04