title: KnockoutJS - Databind to a dictionary collection - with update
body: <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>