I am coding up a dropdown list using knockout.js:

views() is an array of Objects instantiated via JSON using REST. displayName is a String attribute of these objects and is not observable. I would like to pare the displayName attribute and if it matches a certain word, I would like to apply some style to that option.

<select id="views" data-bind="
    options: views(),
    optionsText: 'displayName',
    optionsValues: 'id',
    value: selectedView,
    style: { color: ( displayName == 'some arbitrary text') ? 'red' : 'black' }
 "></select>

The dropdown works as intended when I dont add the style binding to it. I can do a simple parision (i.e. 1 == 1) and it works (although all the options turn red). What I want to do is to pare the 'displayName' attribute to some arbitrary text. It is just a string now, containing any text, but later on this string will be called from my ViewModel.

This will allow me to set certain options in different styles, if my view model requires them to be. Any ideas?

I am coding up a dropdown list using knockout.js:

views() is an array of Objects instantiated via JSON using REST. displayName is a String attribute of these objects and is not observable. I would like to pare the displayName attribute and if it matches a certain word, I would like to apply some style to that option.

<select id="views" data-bind="
    options: views(),
    optionsText: 'displayName',
    optionsValues: 'id',
    value: selectedView,
    style: { color: ( displayName == 'some arbitrary text') ? 'red' : 'black' }
 "></select>

The dropdown works as intended when I dont add the style binding to it. I can do a simple parision (i.e. 1 == 1) and it works (although all the options turn red). What I want to do is to pare the 'displayName' attribute to some arbitrary text. It is just a string now, containing any text, but later on this string will be called from my ViewModel.

This will allow me to set certain options in different styles, if my view model requires them to be. Any ideas?

• javascript
• knockout.js
• knockout-2.0

• What is the problem? Also, what is displayName? (is it observable?) – SLaks Commented Jul 17, 2013 at 15:02
• views() is an array of Objects instantiated via JSON using REST. displayName is a String attribute of these objects and is not observable. I would like to pare the displayName attribute and if it matches a certain word, I would like to apply some style to that option. – Husman Commented Jul 17, 2013 at 15:08
• The == parision does not work at the moment. I can read displayName and it displays in the dropdown, but I am unable to pare it to another String for some reason. – Husman Commented Jul 17, 2013 at 15:09
• Are you using jQuery as well? I can't get a fiddle to work just right because of needing Knockout AND jQuery just want to check – PW Kad Commented Jul 17, 2013 at 15:28

2 Answers 2

The solution in my case was to use the optionsAfterRender callback:

<select id="views" data-bind="
                         options: views(),
                         optionsText: 'displayName',
                         optionsValue: 'id',
                         value: selectedView,
                         optionsAfterRender: optionsAfterRender
                      "></select>

And then in my model:

self.optionsAfterRender = function(option, view) {
            if (view.defaultView) {
                option.className = 'defaultViewHighlight';
            }
        };

You should be able to keep track of the value of the selectedView observable and test against it's displayName property. If it is possible I would remend making displayName an observable though.

http://jsfiddle/p5T8V/

<select id="views" data-bind="
    options: viewers(),
    optionsText: 'displayName',
    optionsValues: 'id',
    value: selectedView,
    style: { color: ( $parent.selectedView().displayName == 'not ok') ? 'red' : 'black' } ">

<span data-bind="text: selectedView().displayName" />

Putting that span at the bottom will allow you see the value of selectedView().displayName. The reason you need to add $parent in your style is that you are binding the element to selectedView. There may be a more efficient way using something like $(this).displayName but I don't have time to make a new project and fiddle only accepts one framework