Knockout.js Farbe <option> bei Verwendung von 'Optionen' Bindung ändern?

Question

Ist es möglich, das Styling (unter Verwendung von "style" - oder "css" -Bindung) eines Optionselements einer Auswahlliste zu ändern, wenn die Bindung "Optionen" in einer Auswahlliste verwendet wird? Oder kann dies nur getan werden, indem man auf der Auswahlliste eine 'foreach' verwendet und das Styling für jedes ändert?

Ich habe dies in Code:

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

aber wenn ich anhängen dann die gesamte Liste ist rot gefärbt, wenn isDefault false zurück.

ist der einzige Weg, dies zu erreichen, es auf diese Weise zu kodieren:

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

Oder gibt es irgendeine Form von Knockout.js wizardry, die ich nicht bewusst bin?

Danke!

Answer 1

Um Ihre Frage zu beantworten, ja das ist der beste Weg, glaube ich.

mit dem Code style: {color: isDefault() === true ? 'black' : 'red'} binden Sie einen Stil an das zugehörige DOM-Element. In diesem Fall das gesamte <select> Tag. Nicht ein <option> Tag wie du willst. Deshalb ändert sich Ihre gesamte Liste Farbe.

Werfen Sie einen Blick auf die knockoutjs docs für weitere Informationen über Stil verbindlich.

Answer 2

auf Thomas Wiersema Antwort zu erweitern, wollen, dass die Art und Weise werden Sie, dass auf einer Basis pro-Reihe zu nähern Handhabung ist so etwas wie:

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

dann, in JavaScript, fügen Sie eine Funktion, um Ihr übergeordnetes Objekt wie so (ich einige Annahmen mache, natürlich, wie Ihr übergeordnetes Objekt vm und isDefault Zugehörigkeit zu einer combinedComponent genannt wird):

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

Wenn Sie nicht sicher sind, was call tut Besuche bind vs apply vs call

Ich hoffe, dass hilft - lassen Sie mich wissen, wenn ich es ausarbeiten kann!

Answer 3

Um zu addieren, was bereits gesagt wurde, gibt es eine Funktion von Knockout, die ich finde, wird oft übersehen und ist sehr praktisch in diesen Situationen: $index. Zum Beispiel mache ich eine Liste, in der ich möchte, dass die erste Option in der Liste schwarz und der Rest rot ist. So kann ich nur ändern, was Sie als Ihre zweite Option haben wie so:

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

Oder wenn Sie zu den abwechselnden Farben wollen einfach nur eine Modulprüfung verwenden.

<select id="components-select" size="4" name="components-select" data-bind="foreach: combinedComponents"> <option data-bind="value: id, text: displayName, style: {color: $index % 2 === 1 ? 'black' : 'red'}"></option> </select>