knockout data-bind on dynamically generated elements

javascript jquery knockout.js
King Julien picture King Julien · Jun 16, 2012 · Viewed 61k times · Source

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?

Answer

PlTaylor picture PlTaylor · Jun 16, 2012

If you add this element on the fly after you have bound your viewmodel it will not be in the viewmodel and won't update. You can do one of two things.

  1. Add the element to the DOM and re-bind it by calling ko.applyBindings(); again
  2. OR add the list to the DOM from the beginning and leave the options collection in your viewmodel empty. Knockout won't render it until you add elements to options on the fly later.

Related questions

Javascript Equivalent to C# LINQ Select

Following this question here : Using the checked binding in knockout with a list of checkboxes checks all the checkboxes I've created some checkboxes using knockout that allow selection from an array. working fiddle taken from above post: http://jsfiddle.net/…

Read More
How to have multiple data-bind attributes on one element?

I need to have multiple data bindings on one element. For example, I want a href as well as a html data-binding on one a tag. I have tried this, <a data-bind="html: name" data-bind="attr: { href: url }" data-bind="…

Read More
How to create an auto-complete combobox?

Does any one know the best way to create an autocomplete combobox with Knockout JS templates? I have the following template: <script type="text/html" id="row-template"> <tr> ... <td> <select class="list" data-bind="…

Read More