Geek asks and answers

Does Knockout.js change color <option> when using 'options' binding?

Is it possible to change the style (using the "style" or "css" binding) of the selection list select item when using the "options" binding in the selection list? Or can this be done only using the "foreach" in the list of choices and style changes for each?

I have this in code:

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

but if I add style: {color: isDefault() === true ? 'black' : 'red'}, then the whole list will be colored red if it isDefaultreturns false.

This is the only way to achieve this, in order to encode it as follows:

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

Or is there some form of Knockout.js magic that I don't know about?

Thank!

+6
source share
4 answers

, , , .

style: {color: isDefault() === true ? 'black' : 'red'} () DOM. <select>. <option>, . .

knockoutjs docs .

+1

, , , - :

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

JavaScript , ( , , , vm isDefault, ):

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

, call, bind vs apply vs call

, - , !

+1

, , Knockout, , , : $index. , , , , - . , , :

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

, , .

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

0

'optionsAfterRender', . http://jsfiddle.net/cZRJN/243/

var viewModel = function() {
  
  this.combinedComponents = ko.observableArray([{
displayName: 'item1',
id: 1,
isDefault:true
  }, {
displayName: 'item2',
id: 2,
isDefault:false
  }, {
displayName: 'item3',
id: 3,
isDefault:true
  }]);
  
  OptionsAfterRender = (option, item) => {
    
    ko.applyBindingsToNode(option, {style: { color: item.isDefault ? 'red' : 'black'}}, item);
};
  
  
  this.chosenComponent= ko.observable(1);
}

ko.applyBindings(new viewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

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

More articles:


All Articles