Question: KnockoutJs + DataTables Server side binding + ButtonEvent

Question

KnockoutJs + DataTables Server side binding + ButtonEvent

Answers 0
Added at 2017-11-30 17:11
Tags
Question

I have a KnockoutJs and DataTables project. All data is coming server-side.

My Question is this: In one column we have a button with a data-bind="click: someFunction" Obviously this is not getting called because the page is already bound before the grid is loaded. Fair enough. Inside the table definition I override the "fnDrawCallback" function and add this code

 self.addButtonEventsToGridRow(self, $("#tableDomId #buttonId"));

and the function looks like this

        self.addButtonEventsToGridRow = function (model, element) {

            for (var i = 0; i < element.length; i++) {
                ko.cleanNode(element[i]);
                ko.applyBindings(model, element[i]);
            }
        };

I have to do this for every button. (Obviously that in itself is ugly)

 "<button type='button' id='buttonId' class='btn btn-primary btn-xs' data-bind='click: someFunction'>ButtonText</button>"

However, now the event DOES fire. I can prove this

        self.someFunction = function(data) {
            console.log(data);
        }

Here is the problem. The "data" object passed in seems to be the entire viewmodel, not the actual row data.

I feel my solution in itself is a failure, but I cannot find a proper way to make this work.

I am open to either modifying my solution, or if someone can point me to the proper way this is supposed to work I would greatly appreciate it.

FYI, here is my UGLY workaround for this issue inside the "render" overdide for the particular column. Note if I

 "<button type='button' id='buttonId' class='btn btn-primary btn-xs' data-bind='click: function(){ return   someFunction(" + fulldata + ");}'>ButtonText</button>" +
Answers to

KnockoutJs + DataTables Server side binding + ButtonEvent

Source Show
◀ Wstecz