opcje Knockout css warunkowy

Question

Mam zaobserwowania tablicę obiektów

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

I wybierz opcje z tej tablicy:

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

Jak za pomocą nokaut mogę zrobić tak, że jeśli pytanie .personalized == Kolor "Y" tekstu tego pytania byłby zielony?

Answer 1

Najprościej jest css binding

Szybkie dostosowanie dokumentacji do potrzeb byłoby

<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

Możesz użyć foreach zamiast zwykle opcji wiązania. Coś jak

<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

Istnieje również możliwość ustawienia danych-wiążą = "style: {color: value? 'green': null} "

To nie jest najlepsza opcja (najlepiej jest ustawić nową klasę), ale jest to możliwe