Question

我正在使用knockout js 3.2，我对选择绑定如何工作有基本的困惑

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

在上面的示例中，如果我们有一个

类型的对象

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

价值和期权价值的区别和用途是什么？有人可以提供帮助。

Answer 1

value参数告诉绑定要使用select的选定值设置的observable的名称。所以在你的例子中，稍作修改

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

使用绑定：

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

此绑定假定您的viewModel（包含choices数组的对象）还包含一个名为selectedChoice的对象（可观察），其中包含{ id: 'M', DisplayName: "Male" }或{ id: 'F', DisplayName: "Female"}

现在，让我们添加optionsValue绑定，它告诉绑定选定选项的哪个属性放入选定的value绑定。所以，让我们添加它（注意它区分大小写，因为它引用了一个javascript对象属性，区分大小写：

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

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

更简单地说optionsValue: 'id'表示＆＃34;将所选值设置为所选项目的id属性＆＃34;并且value: selectedChoice表示＆＃34;将所选项目存储在selectedChoice可观察项中。

＆＃13;

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

＆＃13;

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

＆＃13;

混淆了什么是optionsValue和value

1 个答案: