knockout.js - 具有复杂类型时，KnockoutJs 中的值绑定(bind)无法选择

Question

我正在尝试在选择元素上使用值绑定(bind)，如本 fiddle 所述:http://jsfiddle.net/MikeEast/nM6dd/2/

但是，我似乎无法设置选定的选项(值绑定(bind))。

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

谢谢!

Answer 1

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/1.2.1/knockout-min.js"></script>
<select data-bind="options: items, optionsText: 'name', optionsValue: 'id', value: selectedItemId"></select>
<span data-bind="text: selectedItem().name"></span>

干杯!