淘汰选项绑定，嵌套选项值

【问题标题】：knockout options binding, nested optionsValue淘汰选项绑定，嵌套选项值
【发布时间】：2023-04-11 07:05:01
【问题描述】：

假设我们的选项数组包含这样的对象

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

【问题讨论】：

Javascript knockout binding nested objects not working的可能重复

标签： javascript knockout.js

【解决方案1】：

我们可以使用函数代替字符串来解决这个问题。来自 Knockout 的documentation：

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

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

JSFiddle demo.

【讨论】：