击倒选项绑定，嵌套optionsValue

knockout options binding, nested optionsValue

本文关键字：嵌套 optionsValue 绑定 选项      更新时间：2023-09-26

让我们假设我们的选项数组包含如下对象

{
    id: 1,
    name: "Wisconsin",
    attr: {
        color: "red"
    }
}

对于删除绑定我们可以这样写，

<select data-bind="
    options:availableStates, 
    optionsText:'name', 
    optionsValue:'id', 
    value:selectedStateId">
</select>

然而，如果我想要optionsValue = attr.color的值是空的

https://jsfiddle.net/xxhc9wwh/1/

我们可以用函数代替字符串来解决这个问题。摘自Knockout的文档:

与optionsText类似，您还可以传递一个名为optionsValue的附加参数，以指定应该使用哪些对象的属性来设置KO生成的<option>元素的值属性。你也可以指定一个JavaScript函数来确定这个值。这个函数将接收选中的项作为它唯一的参数，并且应该返回一个字符串用于<option>元素的value属性。

optionsValue: function(self) { return self.attr.color }

JSFiddle演示。

相关文章：