opzioni Knockout CSS condizionale

Question

ho una matrice osservabile di oggetti

question = { 
     ownerUserName: item.id, 
     text: item.text, 
     dataType: item.dataType, 
     personalized: item.personalized, 
     status: item.status, 
     actionUserName: item.actionUserName 
    } 

e una selezionata con le opzioni di questa matrice:

<select id="questId" style="width: 425px" data-bind="options: questionList, optionsText: 'text'"> 

Come con l'aiuto di eliminazione diretta posso fare in modo che se domanda .personalized == "Y" il colore del testo di questa domanda sarebbe verde?

Answer 1

La cosa migliore è la css binding

Un rapido adeguamento della documentazione per il vostro bisogno sarebbe

<div data-bind="text: personalized, css: personalizedStatus"> 
    Profit Information 
</div> 

<script type="text/javascript"> 
    question.personalizedStatus = ko.computed(function() { 
     return this.personalized() == "Y" ? "green" : "red"; 
    }, question); 

</script> 
<style> 
    .green {color:green;} 
    .red{color:red;} 
</style> 

Answer 2

È possibile utilizzare foreach anziché le solite opzioni binding. Qualcosa di simile

<style> 
    .highlighted{ 
     background-color: red; 
    } 
</style 
<select id="questId" style="width: 425px" data-bind="foreach: questionList"> 
    <option data-bind="text: text, class: {highlighted: personalized == 'Y'}"> 
</select> 

Answer 3

C'è anche un'opzione per impostare i dati-bind = "stile: {color: value? 'green': null} "

Non è l'opzione migliore (il migliore è impostare una nuova classe) ma è possibile