Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get dynamically inserted HTML to work with knockoutjs

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>' 
like image 960
T.Ho Avatar asked May 31 '12 01:05

T.Ho


People also ask

How do I use KnockoutJS in HTML?

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.

How do you activate a KnockoutJS model?

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.

Does knockout require jQuery?

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.

What is $root in KnockoutJS?

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.


Video Answer


1 Answers

You have to call this function after insert dynamic HTML element

ko.applyBindings(viewModel, elementContainingDynamicContent)

Example here http://jsfiddle.net/rniemeyer/FCN5p/

like image 171
James Avatar answered Sep 30 '22 15:09

James