javascript - 对 optionsValue 和 value 的真正含义感到困惑

Question

我正在使用knockout js 3.2，我对选择绑定(bind)的工作原理有基本的困惑

<select data-bind="options: choices,
            optionstext: 'DisplayName' ,
            optionsvalue :'Id' ,
            value:id,
            optionscaption :'Select...'"></select>

在上面的例子中，如果我们有一个类型的对象

var choices = [
        { id: 'M', DisplayName: "Male" },
        { id: 'F', DisplayName: "Female" }        
    ];

value 和 optionsvalue 有什么区别和用途？有人可以帮忙吗？

Answer 1

value 参数告诉绑定(bind)要使用 select 的选定值设置的可观察对象的名称。所以在你的例子中，稍微修改一下

var choices = [
    { id: 'M', DisplayName: "Male" },
    { id: 'F', DisplayName: "Female" }        
];

使用绑定(bind):

<select data-bind="options: choices,
        optionstext: 'DisplayName' ,
        value: selectedChoice,
        optionscaption :'Select...'"></select>

此绑定(bind)假设您的 viewModel(包含 choices 数组的对象)还包含一个名为 selectedChoice 的对象(可观察)，该对象将包含 { id : 'M', DisplayName: "男"} 或 { id: 'F', DisplayName: "女"}。

现在，让我们添加 optionsValue 绑定(bind)，它告诉绑定(bind)将所选选项的哪个属性放入所选 value 绑定(bind)中。因此，让我们将其添加到(请注意，它区分大小写，因为它引用了 javascript 对象属性，该属性区分大小写:

<select data-bind="options: choices,
        optionstext: 'DisplayName' ,
        value: selectedChoice,
        optionsValue: 'id',
        optionscaption :'Select...'"></select>

现在，当用户从 select 元素中选择一个选项时，selectedChoice 将不包含整个选项对象，而仅包含 id 属性。因此，selectedChoice 将是 'F' 或 'M'。

更简单地说，optionsValue: 'id' 表示“将所选值设置为所选项目的 id 属性”，value: selectedChoice 表示“将所选项目存储在 selectedChoice 可观察对象中。

vm = {
  choices: [ { id: 'M', DisplayName: 'Male' }, { id: 'F', DisplayName: 'Female' } ],
  selectedChoice1: ko.observable(),
  selectedChoice2: ko.observable()
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
Using optionsValue='id':
<select data-bind="options: choices, value: selectedChoice1, optionsText: 'DisplayName', optionsValue: 'id'"></select>
Selected Option: <span data-bind="text: selectedChoice1"></span>
<br/>
Without optionsValue:
<select data-bind="options: choices, value: selectedChoice2, optionsText: 'DisplayName'"></select>
Selected Option: <span data-bind="text: JSON.stringify(selectedChoice2())"></span>