I'm using JQuery DataTables for all my tables because of all the nice built-in features, but it seems the only way to customize the table layout is to set the "sDom" option attribute for the DataTable and use something like $("div.SOMECLASS").html(HTML_HERE)
to insert the customized html into the table. (FYI, i'm just trying to customize the header).
The problem is I want the inserted html to use knockoutjs binding. Knockout doesn't seem to initialize the binding this way.
Is there a way to work around this?
This is part of the html that I want to insert. It's pretty much a drop down list of some custom filter functions for the table.
'<li><a data-bind="click: Filter(\'Severity 1\', 2)">Severity 1</a></li>'
It is very easy to use KnockoutJS. Simply refer the JavaScript file using <script> tag in HTML pages. A page as in the following image will be displayed. Click on download link and you will get the latest knockout.
To activate Knockout, add the following line to a <script> block: ko. applyBindings(myViewModel); You can either put the script block at the bottom of your HTML document, or you can put it at the top and wrap the contents in a DOM-ready handler such as jQuery's $ function.
KO itself doesn't depend on jQuery, but you can certainly use jQuery at the same time, and indeed that's often useful if you want things like animated transitions.
In the root context, $data and $root are equivalent. Inside a nested binding context, this parameter will be set to the current data item (e.g., inside a with: person binding, $data will be set to person ). $ data is useful when you want to reference the viewmodel itself, rather than a property on the viewmodel.
You have to call this function after insert dynamic HTML element
ko.applyBindings(viewModel, elementContainingDynamicContent)
Example here http://jsfiddle.net/rniemeyer/FCN5p/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With