1

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>" +
JCircio
  • 525
  • 2
  • 7
  • 18

0 Answers0