Список выбора нокаута - укажите значение по умолчанию

Question

При привязке данных к списку выбора с объектами, как мне указать значение по умолчанию?

Я пытаюсь следующим образом:

var Country = function(name, population) {
  this.countryName = name;
  this.countryPopulation = population;
};

var viewModel = {
  availableCountries: ko.observableArray([
    new Country("UK", 65000000),
    new Country("USA", 320000000),
    new Country("Sweden", 29000000)
  ]),
  selectedCountry: ko.observable(new Country("USA", 320000000))
};

<select data-bind="options: availableCountries,
                   optionsText: 'countryName',
                   value: selectedCountry,
                   optionsCaption: 'Choose...'"></select>

Идея состоит в том, чтоavailableCountries будет содержать массив Country объектов, а выбранный объект будет храниться в наблюдаемой selectedCountry.

Все работает как положено, кроме случаев, когда речь идет о предварительном выборе значения в списке.

Я ожидаю, что это не работает, потому что это на самом деле разные ссылки на объекты.Каков самый чистый и простой способ заставить это работать?Я хочу, чтобы страна США была выбрана по умолчанию.

Вот скрипка для иллюстрации проблемы: https://jsfiddle.net/85crLcy2/

Answer 1

Вы можете разделить массив вариантов и затем установить selectedCountry на выбор США:

var choices = [
    new Country("UK", 65000000),
    new Country("USA", 320000000),
    new Country("Sweden", 29000000)
  ];
var viewModel = {
  availableCountries: ko.observableArray(choices),
  selectedCountry: ko.observable(choices[1])
};