knockout data-bind on dynamically generated elements

[levani]

How is it possible to make knockout data-bind work on dynamically generated elements? For example, I insert a simple html select menu inside a div and want to populate options using the knockout options binding. This is what my code looks like:

$('#menu').html('<select name="list" data-bind="options: listItems"></select>');

but this method doesn't work. Any ideas?

[Michael "Kato" Wulf]

You just need to use applyBindings() after you render the element.

http://jsfiddle.net/katowulf/7TFQJ/1/ 

--
Michael Wulf

775-235-8398

web site | contact

[Boris Rosenow]

Depends on what exactly you are trying to achieve. If you just want parts of your view being rendered at a later point in time with a pre-defined data structure, you could use the "with" control flow binding with an observable object: http://jsfiddle.net/bombo/ZbxbQ/2/

If you have more dynamic structures and want to render a templates in accordance to those structures, you could use the "template" binding. The following examples receives the used template name by a supplied view model function, and only renders, if the observable used as data parameter has any value: http://jsfiddle.net/bombo/JxSrQ/34/

Hope one of these can help you.

Regards,

Boris

[Boris Rosenow]

Please ignore the empty script tag in my first fiddle. Just forgot to remove that. :)

[jna...@gmail.com]

What if you want to apply the bindings to the generated elements, but the elements bind to a specific object in the model's tree?  For instance, you have an ajax-loaded modal display to edit an object in an observable array.  How do you call applyBindings and write a data-bind attribute so that the modal form elements bind to the specific object in the array?

Thanks! 

[a.f.h...@gmail.com]

Did you ever figure it out?

[hac...@gmail.com]

I've posted a simple example for dinamically adding an observable into the view model tree in StackOverflow. Hope it helps.

http://stackoverflow.com/a/16044129/1435589

[Hasen el Judy]

Why would you insert or remove elements using jQuery? Always use knockout itself: if, with, and template.

[soha...@gmail.com]

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