淘汰赛 - ＆gt;将元素绑定到Select的值

Question

在下面的exclude = ('views','likes','slug') 中，我绑定了一个可观察的数组。

select

我相信很容易看出每个选项的文本都是属性“SimpleDescription”，它运行正常。我现在需要的是<select id="selectProtocols" data-bind="options: optionsAvailable, optionsCaption:'Selecione...', optionsText: 'SimpleDescription', optionsValue:'???'"></select> 的{​​{1}}是元素本身！

我该怎么做？

Answer 1

  

注2：使用下拉列表（即<select>元素）

     

Knockout特别支持下拉列表（即<select>   元件）。值绑定与选项一起使用   绑定，让您读取和写入任意JavaScript的值   对象，而不仅仅是字符串值。如果你愿意，这非常有用   让用户从一组模型对象中进行选择。举个例子，   查看选项绑定或处理多选列表，请参阅   selectedOptions绑定的文档。

     

http://knockoutjs.com/documentation/value-binding.html

Answer 2

只需不设置optionsValue属性，Knockout会自动将observableArray中的选定对象存储到您在value属性中声明的observable中。

Knockout内心的深处是以下功能：

function applyToObject(object, predicate, defaultValue) {
    var predicateType = typeof predicate;
    if (predicateType == "function")    // Given a function; run it against the data value
        return predicate(object);
    else if (predicateType == "string") // Given a string; treat it as a property name on the data value
        return object[predicate];
    else                                // Given no optionsText arg; use the data value itself
        return defaultValue;
}

如果未设置optionsValue属性，则此函数将落入底部else语句，该语句将返回当前数组项。

Answer 3

将$data分配给optionsValue在这里没有意义，您必须阅读optionsValue所做的事情[1]。它基本上只是在value下设置<option>元素的<select>属性。因此，您无法将其设置为正在被选中的JS对象，您只能将其设置为文本。

<select data-bind="
    options: optionsAvailable,
    optionsCaption: 'Selecione...',
    optionsText: 'SimpleDescription',
    optionsValue: 'SomeOtherPropertyThatEvaluatesToText',    
    value: selectedOption"></select>

value绑定应该接收一个将被设置为所选JS对象的observable。而且，如果你愿意，你可以给optionsValue一个函数来获取这个JS对象并将其转换成文本，如下所示：

<select data-bind="
    options: optionsAvailable,
    optionsCaption: 'Selecione...',
    optionsText: 'SimpleDescription',
    optionsValue: JSON.stringify,    
    value: selectedOption"></select>

以下是一个小提琴：http://jsfiddle.net/43t9dzxt/1/

[1] http://knockoutjs.com/documentation/options-binding.html

Answer 4

我最终使用optionsValue:$data结合optionsAfterRender函数...它按预期工作，对象被传递给“in-natura”！