使用Knockout在下拉列表中綁定選定的項目

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但重新定義它。您正在創建新的observable，綁定不會通知有關更改。 defaultOption = new value不是爲可觀測值寫入新值的正確方法。相反，您應該使用新值作爲參數調用observable作爲函數：defaultOption(new value)。

你setDefault函數應該是這樣的：

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

更新的jsfiddle：http://jsfiddle.net/tNZ8f/1/