Применение динамических стилей CSS для выпадающих элементов списка в Oracle Jet

Question

Вот мой выпадающий список

<select id="productselect" aria-label="Single Select"      
        data-bind="ojComponent: {component: 'ojSelect', disabled: false,
                  value: productValue,optionChange: onChangeProduct,
                  rootAttributes: {style:'max-width:20em'}}">
   <!-- ko foreach: products -->
      <option data-bind="value:value, text:label, css:{labelclass:true}">   
      </option>    
   <!-- /ko -->
</select>

Я хотел бы применять разные цвета к каждому элементу списка, передавая динамический класс, но не работая. Пожалуйста помоги.

Выпадающий должен быть как

<option style = "color : red" data-bind="value:value, text:label">
<option style = "color : blue" data-bind="value:value, text:label">
and so on...

Как добиться этого типа выпадающего динамически.

Answer 1

Привязка css не работает для вышеуказанного типа выбранного компонента. Я должен был пойти с этим типом, и он работает нормально, как ожидалось.

<ul id="prods" style="display: none" >
   <!-- ko foreach: prods -->
    <li data-bind="attr: {'oj-data-value': value}, style:
         {color:colorString}">
      <span data-bind="text: label"></span>
   </li>
  <!-- /ko -->
</ul>
<select id="prodselect" name="prod_names"
    data-bind="ojComponent: {component: 'ojSelect', disabled: true,
               renderMode: 'jet',list: 'prods', value: product,
               rootAttributes: {style:'max-width:100%'}}">
</select>

Передача необходимой информации из серверной части через структуру данных "prod".

Answer 2

css Привязка обычно имеет логический тест, поэтому вы можете решить, какие классы применять, но вы передаете trueпоэтому он применяет класс CSS labelclass к каждому варианту.

Если вы хотите, чтобы классы отображались красным или синим цветом, измените разметку HTML на:

<option data-bind="value: value, text: label, css: computedLabelClass">

И измените модель представления JavaScript, чтобы добавить:

this.computedLabelClass = ko.pureComputed(function() {
    return <your logic test here> ? "redLabelClass" : "blueLabelClass";
});