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