我正在使用KO MVVM进行数据绑定以及Phonegap(在ripple模拟器中运行),但我遇到了一个问题。
我正在尝试在select元素中绑定选定值的对象。
我的代码是:
HTML
<select data-bind="options: pro(),
optionsText: 'value',
optionsValue: this,
value: province">
</select>
JS
function screen1ViewModel()
{
var self = this;
self.pro = ko.observableArray();
self.province = ko.observable();
}
$(document).ready(function () {
var vm = new screen1ViewModel();
var pro = [{
"symbol": "AB",
"value": "AB - Alberta"
},
{
"symbol": "BC",
"value": "BC - British Columbia"
}];
$.each(pro, function(index, item) {
vm.pro().push(item);
});
});
console.log(vm.province().symbol);
console.log(vm.province().value);
例如,如果我从选择列表中选择AB - Alberta
,我也需要它的其他键。
任何帮助将不胜感激。
答案 0 :(得分:2)
您只需删除optionsValue: this,
(虽然奇怪的是它在KO 3.0及以上版本Demo中运行)
因为默认行为是如果没有指定value
选项,Knockout会将整个对象用作optionsValue
,这正是您所需要的:
<select data-bind="options: pro, optionsText: 'value', value: province"></select>
演示JSFiddle。
答案 1 :(得分:1)
您的视图模型似乎受到了干扰。这是一个解决方案
查看
<select
data-bind="
options: pro,
optionsText: 'value',
optionsValue: 'symbol',
optionsText: 'value'
value: province
">
</select>
视图模型
function screen1ViewModel()
{
var self = this;
self.pro = ko.observableArray();
self.province = ko.observable();
self.GetValue = function(){
console.log(self.province())
}
}
$(document).ready(function () {
var vm = new screen1ViewModel();
var pro = [{
"symbol": "AB",
"value": "AB - Alberta"
},
{
"symbol": "BC",
"value": "BC - British Columbia"
}];
vm.pro(pro)
ko.applyBindings(vm)
});
Documentation 会有所帮助。
编辑:
修改功能
self.GetValue = function(){
var obj = {}
ko.utils.arrayForEach(self.pro(),function(item){
if(item.symbol ==self.province()){
obj = item
}
})
console.log(obj)
}