Knockout.js changing colour of <option> when using 'options' binding?

Question

Is it possible to alter the styling (using 'style' or 'css' binding) of a select list's option element when using the 'options' binding on a select list? Or can this only be done by using a 'foreach' on the select list and altering the styling for each ?

I have this in code:

<select id="components-select" size="4" name="components-select"
                        data-bind=" options: combinedComponents, 
                                    optionsText: 'displayName', 
                                    optionsValue: 'id', 
                                    value: chosenComponent"></select>

but if I append style: {color: isDefault() === true ? 'black' : 'red'} then the entire list is coloured Red if isDefault returns false.

Is the only way to achieve this to code it this way:

<select id="components-select" size="4" name="components-select"
                        data-bind="foreach: combinedComponents">
    <option data-bind="value: id, text: displayName, style: {color: isDefault() === true ? 'black' : 'red'}"></option>
</select>

Or is there some form of Knockout.js wizardry that I am not aware of?

Thanks!

Answer 1

To expand on Thomas Wiersema's answer, the way you'd want to approach handling that on a per-row basis is something like:

<select id="components-select" size="4" name="components-select"
                    data-bind="foreach: combinedComponents">
<option data-bind="value: id, text: displayName, style: {color: getColorFor.call(null, $data) }"></option>
</select>

then, in JavaScript, attach a function to your parent object like so (I'm making some assumptions, of course, like your parent object being called vm and isDefault belonging to a combinedComponent):

vm.getColorFor = function(component) {
    return component.isDefault() === true ? 'black' : 'red';
}

If you're not sure what call does, check out bind vs apply vs call

I hope that helps -- let me know if I can elaborate!