敲除->将元素绑定到选择值

Question

In the following select , I'm binding an observable array.

<select id="selectProtocols" data-bind="options: optionsAvailable, optionsCaption:'Selecione...', optionsText: 'SimpleDescription', optionsValue:'???'"></select>

I believe it's easy to see that that the text of each option is a property "SimpleDescription", that works fine. What I need now is that the value of the select is the element itself!

How can I do that?

Answer 1

Note 2: Working with drop-down lists (ie, <select> elements)

Knockout has special support for drop-down lists (ie, <select> elements). The value binding works in conjunction with the options binding to let you read and write values that are arbitrary JavaScript objects, not just string values. This is very useful if you want to let the user select from a set of model objects. For examples of this, see the options binding or for handling multi-select lists, see the documentation for the selectedOptions binding.

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

Answer 2

Simply do not set the optionsValue attribute and Knockout will automatically store the selected object from the observableArray into the observable you have declared in the value attribute.

Deep within the bowels of Knockout is the following function:

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

If you do not set the optionsValue attribute then this function will fall into the bottom else statement which will return the current array item.

Answer 3

Assigning $data to optionsValue does not make sense here, you have to read what optionsValue does [1]. It basically just sets the value attribute of the <option> elements under your <select> . So you can't set it to the JS object that's being selected, you can only set it to text.

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

The value binding should receive an observable that will be set to the selected JS object. And, if you want, you can give optionsValue a function that takes this JS object and turns it into text, like this:

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

Here's a sample fiddle to play with: http://jsfiddle.net/43t9dzxt/1/

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

Answer 4

我最终使用了optionsValue:$data和optionsAfterRender函数相结合...它可以像预期的那样在“自然”中传递对象！