0
votes

I have a list box which is using the options knockout data binding. The observable array which is bound to the list box is empty when the page loads but it gets filled on click of a button. How can I dynamically refresh the options binding of the list box on button click ?

 <select id="listBoxOne"  size="10" multiple="multiple" data-bind="options: icdCodesForDxCodeSorterListBox">
 </select>

The listbox is inside a modal form and the observable array gets filled on click of a button which is not in modal form.

1
If your icdCodesForDxCodeSorterListBox is an observable array then your options binding should update automatically. Please post your code where you fill the icdCodesForDxCodeSorterListBox! - nemesv
On button click I am using vm.icdCodesForDxCodeSorterListBox().push statement to fill the observable array. The listbox is inside a modal form and the observable array gets filled on button click which is not in modal form. After button click when I open the modal form, the listbox is always empty. - user2585299
You should write vm.icdCodesForDxCodeSorterListBox.push without the () otherwise you are pushing into the underlying array and Knockout won't be notified about the changes... - nemesv
Thank you for the help. That works. You can modify your comment into answer and I will mark it as an answer. - user2585299

1 Answers

0
votes
  1. Remember that if you insert html dynamically in the page after applyBindings the values will not get bound.

  2. You need to have your modal html in the page as a template before you apply the bindings

  3. [Not recommended] but you also can call applyBindings again but need to limit it to the container of that modal content not to cause conflict with other possible bindings.

  4. Look into requirejs and how you can asynchronously load html templates using the text.js plugin before you run your knockout modules

  5. If you are not doing modular code structure, start doing it.