StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p>I have included my <code>mapDictToArray()</code> function but it simply converts a javascript object into a key-value JS array. I wouldn't think that is contributing to the problem.</p> </blockquote> <p>Actually, that was part of the problem. The function returns a JavaScript array, not an observable array and therefor can't be used properly by Knockout. I've made the following changes to your code:</p> <pre><code>// The "mapDictToArray" makes a normal JS array, not a ko.observableArray(); // You can't simply "merge" a JS array with an observableArray(); you'll need // some extra functionality for that: ko.utils.arrayPushAll() // viewModel.colors(mapDictToArray(dict)); ko.utils.arrayPushAll(viewModel.colors(), mapDictToArray(dict)); // Apply the bindings *after* you've added the contents to the "colors" observable, in order to // get the correct selected value ko.applyBindings(viewModel); </code></pre> <p>That should do the trick (with the correct HTML without the <code>()</code> )!</p> <p><a href="http://jsfiddle.net/ph8Jw/26/" rel="nofollow">JSFiddle</a>.</p> <p><strong>UPDATE</strong></p> <p>I thought about my solution, but something wasn't correct. The only thing that was correct, was the part that you need to apply the bindings <em>after</em> you've added the contents of the colors observable. <a href="http://jsfiddle.net/ph8Jw/31/" rel="nofollow">This is your fiddle</a>, with that part moved down.</p> <p>This works <em>in your case</em>, but you'll need to use the <code>arrayPushAll</code> method when there is already data inside the <code>observableArray</code>. This method merges, while you overwrite it when not using it (<a href="http://jsfiddle.net/ph8Jw/30/" rel="nofollow">example with data inside the observable</a>).</p>

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