FooTable and knockout mvc

Skip to first unread message

Masha Ivanova

Oct 12, 2017, 5:31:47 AM10/12/17
to Knockout MVC

How can I make footable working with knockout mvc?


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) {
    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

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


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

But that will work with using knockout.js binding inside tbody because foreach binding is done inside ko.bindingHandlers.footable.preprocess and our @ko will be mapped to list:

                   <table >
                        <tbody @ko.Bind.Custom("footable", x => x.ItemsList).Custom("delegatedHandler", "click")>
                        @*@using (var item = ko.Foreach(m => m.ItemsList))
                                    <td><span data-bind="text: Name"></span></td>  @* Wrong is <span @item.Bind.Text(x => x.Name)></span> or @ko.Bind.Text(x => x.Name) *@
                                    <td><span data-bind="text: Description"></span></td>

Maybe smb know if that is possible to implement with more clear way using knockout MVC, so that I can use (var item = ko.Foreach(m => m.ItemsList) ?
Reply all
Reply to author
0 new messages