Databases
StackOverflow2013
Postsdbo
POKnockout options bindings not working
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKnockout options bindings not working
    text
    copied!<p>Ok I am probably doing something very silly that is preventing me from getting this to work, but here goes anyway:</p> <p>I am trying to learn how to work with knockout and am trying to build a select list with options defined as an observable array. Here is the code:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;script type="text/javascript" src="./knockout-3.0.0.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var viewModel = { availableQuestions : ko.observableArray(['Who?', 'What?', 'When?']) }; ko.applyBindings(viewModel); &lt;/script&gt; &lt;p&gt;Questions to Ask: &lt;select data-bind="options: availableQuestions"&gt;&lt;/select&gt;&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>This is basically right out of one of their own examples but I cannot get it to work. The select list is not populated at all. I am using the latest version of Chrome (31.0.1650.57) and have looked in developer tools to see if there are issues. I have confirmed that everything is loading properly (ie: knockout is loading, the html is valid) still nothing. Am I missing something obvious?</p> <p>here is the fiddle:</p> <p><a href="http://jsfiddle.net/janarde/r9pCK/" rel="nofollow">http://jsfiddle.net/janarde/r9pCK/</a></p> <p><strong>EDIT</strong></p> <p>Thanks to PW Kad It turned out to be that the DOM wasn't loaded before the binding: </p> <p><strong>EDIT</strong> Thanks to Ek0nomik for pointing out the need to put knockout stuff after the markup.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;script type="text/javascript" src="./knockout-3.0.0.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery-1.10.2.min.js"&gt;&lt;/script&gt; &lt;p&gt;Questions to Ask: &lt;select data-bind="options: availableQuestions"&gt;&lt;/select&gt;&lt;/p&gt; &lt;script type="text/javascript"&gt; var viewModel = { availableQuestions : ko.observableArray(['Who?', 'What?', 'When?']) }; ko.applyBindings(viewModel); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload