javascript - 使用下拉列表时将文本值绑定(bind)到 View 模型的另一个属性

Question

我试图在下拉列表中显示一个可观察数组，当用户选择该选项时，我想显示该 View 模型的属性。看起来很简单。我提供了代码和指向 Fiddle 的链接。

HTML:

<select data-bind="options: oCountries, 
                   optionsText: 'name', 
                   optionsValue: 'isocode', 
                   value: selectedCountry">
</select>

Controlled by <span data-bind="value: selectedCountry.isocode"></span>

JS:

var countries = [{
    "name": "Afghanistan",
    "isocode": "AF",
    "language": "English",
    "crmdatacontroller": "CRM India"
}, {
    "name": "Aland Islands",
    "isocode": "AX",
    "language": "Finnish",
    "crmdatacontroller": "CRM Finland"
}]

var viewModel = {
    oCountries: ko.observableArray(countries),
    selectedCountry: ko.observableArray(['AX'])
};

ko.applyBindings(viewModel);

另见 this fiddle

Answer 1

optionsValue 参数控制 value 绑定(bind)写入的内容。因此，在您的情况下，它将 isocode 写入 selectedCountry。

因此，对您的代码进行最简单的更改是将 selectedCountry 设置为正常的可观察对象和适当的 isocode。然后，让您的跨度使用 text 绑定(bind) selectedCountry。

像这样:http://jsfiddle.net/wxNrt/21/

现在，您还可以使用其他几个选项:- 如果您在绑定(bind)中离开 optionsValue，那么它将直接设置/读取对象。在这种情况下，您需要更改最初的设置方式。

http://jsfiddle.net/wxNrt/23/

-如果你想发送/接收一个 key (如 isocode)，那么你可以使用 optionsValue，但设置一个 dependentObservable 来表示实际对象，如:

http://jsfiddle.net/wxNrt/22/

- 如果您正在处理多选情况，那么您希望使用 selectedOptions 绑定(bind)而不是 value，如下所述:http://knockoutjs.com/documentation/selectedOptions-binding.html