FooTable and knockout mvc

[Masha Ivanova]

Hello,

How can I make footable working with knockout mvc?

I found https://stackoverflow.com/questions/20809746/how-to-refresh-footable-that-is-bound-with-knockout  where footable is working well with knockout.js:

accepted

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'" >

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 >

                        <thead>

                            <tr>

                                <th>Name</th>

                                <th>Description</th>  

                                     @*...*@                             

                            </tr>

                        </thead>

                        <tbody @ko.Bind.Custom("footable", x => x.ItemsList).Custom("delegatedHandler", "click")>

                        @*@using (var item = ko.Foreach(m => m.ItemsList))

                            {*@

                            <tr>

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

                                       @*...*@

                             </tr>

                        @*}*@

                        </tbody>

                    </table>

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