Databases
StackOverflow2013
Postsdbo
POKnockoutJS - Databind to a dictionary collection - with update
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKnockoutJS - Databind to a dictionary collection - with update
    text
    copied!<p>This this question here <a href="https://stackoverflow.com/questions/7400387/knockoutjs-databind-to-a-dictionary-collection">KnockoutJS - Databind to a dictionary collection</a></p> <p>I'm creating a drop down select from JSON coming from the server. However at some point after creating it I wish to update the data. I've created a fiddle <a href="http://jsfiddle.net/LPrf3/" rel="nofollow noreferrer">http://jsfiddle.net/LPrf3/</a></p> <p>Which shows where I'm at at present. I successfully update the select's observable array. However... for some reason you need to click into the select from the drop down in order for it to refresh</p> <p>Javascript:</p> <pre><code>$(function() { var destinationsFromServer = {"Europe":"Europe incl Egypt, Turkey &amp; Tunisia","ANZO":"Australia &amp; New Zealand","WorldwideUSA":"Worldwide (incl USA &amp; Canada)"}; var updatedDestinationsFromServer = {"Arctic":"Includes Polar bears and seals","Antarctic":"Just Penguins"}; function mapDictionaryToArray(dictionary) { var result = []; for (var key in dictionary) { if (dictionary.hasOwnProperty(key)) { result.push({ key: key, value: dictionary[key] }); } } return result; } function viewModel () { destinations= ko.observableArray(mapDictionaryToArray(destinationsFromServer)); selectedDestination= ko.observable(); updateDestinations = function() { destinations= ko.observableArray(mapDictionaryToArray(updatedDestinationsFromServer)); }; }; ko.applyBindings(new viewModel()); }); </code></pre> <p>HTML</p> <pre><code>&lt;select data-bind="options: destinations, optionsText: 'key', optionsValue: 'value', value: selectedDestination"&gt;&lt;/select&gt; &lt;hr /&gt; &lt;div data-bind="text: selectedDestination"&gt;&lt;/div&gt; &lt;button data-bind="click:updateDestinations"&gt;UPDATE&lt;/button&gt; </code></pre> <p>How can I get the select to update?</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