tùy chọn Knockout có điều kiện css

Question

Tôi có một mảng quan sát được của các đối tượng

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

Và một lựa chọn với các tùy chọn từ mảng này:

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

Làm thế nào với sự giúp đỡ của loại trực tiếp tôi có thể làm để nếu câu hỏi .personalized == "Y" màu của văn bản của câu hỏi này sẽ có màu xanh lục?

Answer 1

Tốt nhất là css binding

Một sự thích nghi nhanh chóng của các tài liệu hướng dẫn cho nhu cầu của bạn sẽ được

<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

Bạn có thể sử dụng foreach thay vì thông thường tùy chọn ràng buộc. Một cái gì đó như

<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

Ngoài ra còn có tùy chọn để thiết lập dữ liệu-ràng buộc = "phong cách: {color: value? 'green': null} "

Đó không phải là lựa chọn tốt nhất (tốt nhất là đặt lớp mới) nhưng có thể