Knockout:使用select元素的选项绑定数据对象

时间:2014-07-07 08:22:17

标签: jquery cordova knockout.js

我正在使用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,我也需要它的其他键。

任何帮助将不胜感激。

2 个答案:

答案 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)
});

Demo

Documentation 会有所帮助。

编辑:

修改功能

self.GetValue = function(){
    var obj = {}
    ko.utils.arrayForEach(self.pro(),function(item){
        if(item.symbol ==self.province()){
            obj = item
        }
    })
    console.log(obj)
}

Demo