当具有复杂类型时,KnockoutJs中的值绑定对于select是失败的

时间:2011-12-22 23:33:12

标签: knockout.js

我正在尝试在select元素上使用值绑定,如此小提琴中所述:http://jsfiddle.net/MikeEast/nM6dd/2/

但是,我似乎无法设置所选选项(值绑定)。

我知道我可以使用optionsValue绑定,但是这会使值成为字符串而不是对象,这是不可取的。如果这是唯一的方法,我该如何确保将所选选项写回视图模型?

谢谢!

1 个答案:

答案 0 :(得分:17)

这是解决方案。您必须将属性optionsValue: 'id'添加到data-bind。 您还必须在viewModel中放置一个返回所选对象的函数。

<强> HTML

<select data-bind="options: items, optionsText: 'name', optionsValue: 'id', value: selectedItemId"></select>
<span data-bind="text: selectedItem().name"></span>

<强> JS

var viewModel = function () {
   this.items = ko.observableArray([
       { id: 1, name: "Apple" }, 
       { id: 2, name: "Orange"},
       { id: 3, name: "Banana"}
   ]);
   this.selectedItemId = ko.observable(3);
   this.selectedItem = function() {
       var self = this;
       return ko.utils.arrayFirst(this.items(), function(item) {
           return self.selectedItemId() == item.id;
       });
   }.bind(this);
};

var vm = new viewModel();
ko.applyBindings(vm);

干杯!