使用 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);

如果我在没有 setDefault 函数并直接设置 defaultOption 变量的情况下尝试这段 JS 代码，一切正常。但是，如果我按照列出代码的方式进行操作，绑定将不起作用。

小提琴的链接是：http://jsfiddle.net/tNZ8f/

有什么建议吗？？

Answer 1

您的setDefault 函数不会更新defaultOption，而是重新定义它。您正在创建新的 observable，并且绑定不会收到有关更改的通知。 defaultOption = new value 不是向 observable 写入新值的正确方法。相反，您应该使用新值作为参数调用 observable 作为函数：defaultOption( new value )。

您的 setDefault 函数应如下所示：

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

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