KnockoutJS - Databind to a dictionary collection - with update - json

Question

This this question here
KnockoutJS - Databind to a dictionary collection
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
http://jsfiddle.net/LPrf3/
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
Javascript:
$(function() {
var destinationsFromServer = {"Europe":"Europe incl Egypt, Turkey & Tunisia","ANZO":"Australia & New Zealand","WorldwideUSA":"Worldwide (incl USA & 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());
});
HTML
<select data-bind="options: destinations, optionsText: 'key', optionsValue: 'value', value: selectedDestination"></select>
<hr />
<div data-bind="text: selectedDestination"></div>
<button data-bind="click:updateDestinations">UPDATE</button>
How can I get the select to update?

Answer 1

You are reassinging destinations to a new observabelArray instead of updating the array. See this fiddle. When updating any observable, always pass the new value in as a parameter, never assign a new value with the = operatior.
Wrong Way:
updateDestinations = function(){
destinations=ko.observableArray(mapDictionaryToArray(updatedDestinationsFromServer));
};
Right Way:
updateDestinations = function(){
destinations(mapDictionaryToArray(updatedDestinationsFromServer));
};