我正在尝试使用 knockout 来绑定(bind)下拉列表的选定值。 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 函数的情况下尝试这段 JS 代码并直接设置 defaultOption 变量,一切正常。但是,如果我按照列出代码的方式进行操作,绑定(bind)将不起作用。
fiddle 的链接是:http://jsfiddle.net/tNZ8f/
有什么建议吗??
最佳答案
您的 setDefault
函数不会更新 defaultOption
而是重新定义它。您正在创建新的可观察对象,并且绑定(bind)不会收到有关更改的通知。 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/
关于javascript - 使用 Knockout 在下拉列表中绑定(bind)选定项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20687861/