Связывание выбранного элемента в выпадающем меню с использованием нокаута

Question

Я пытаюсь связать выбранное значение выпадающего списка с помощью нокаута. HTML является:

<div> 
Dummy 
<select id="dummy" data-bind="options: DummyOptions, optionsCaption : 'Select..', optionsText: 'Message', value: selectedValue"></select> 
</div> 
<button data-bind="click : setDefault">click me </button> 
<div data-bind="visible: selectedValue"> <!-- Appears when you select something --> 
    You have chosen a country with population 
    <span data-bind="text: selectedValue() ? selectedValue().Message : 'unknown'"></span>. 

Javascript является:

var dummyOptions = ko.observableArray([{ isSelected: false, Message: "Test1" }, { isSelected: false, Message: "Test2"},{ isSelected: true, Message: "Test3"}]); 

var defaultOption = ko.observable(); 

var vm = { 
DummyOptions : dummyOptions, 
selectedValue : defaultOption, 
setDefault : function(){ 
    defaultOption = ko.observable(ko.utils.arrayFirst(dummyOptions(), function(item) { 
     return item.isSelected; 
    })); 
} 
}; 

ko.applyBindings(vm); 

Если я пытаюсь этот кусок JS кода без функции SetDefault и установив переменную defaultOption непосредственно, все работает отлично. Но, если я делаю это так, как я перечислил код, привязка не работает.

Ссылка на скрипку: http://jsfiddle.net/tNZ8f/

Любые предложения ??

Answer 1

Ваша setDefault функция не обновляет defaultOption, но переопределяет ее. Вы создаете новые наблюдаемые, и привязки не сообщаются об изменениях. defaultOption = new value - это неправильный способ записи нового значения в наблюдаемое. Вместо этого вы должны вызвать функцию наблюдаемого как функцию с новым значением в качестве параметра: defaultOption(new value).

Ваша функция SetDefault должна выглядеть следующим образом:

setDefault : function(){ 
    defaultOption(ko.utils.arrayFirst(dummyOptions(), function(item) { 
     return item.isSelected; 
    })); 
} 

обновленный jsfiddle: http://jsfiddle.net/tNZ8f/1/