using knockout to set css class with an if condition

Question

I want to set a bootstrap css class to a span with if condition (up to the binded value). I have isApproved field in a list, I want to see the field with 'label-success' class when its active and 'label-important' class when its inactive

I added this line, but all the time it's taking the first class

data-bind="
    text: isApproved,
    css: isApproved = 'true' ? 'label label-important' : 'label label-important'"

Is it possible in the html or I should add a computed field on my VM?

Can you add the code you're working with? JS & HTML? Preferably in a jsfiddle or something. — Sidney Gijzen
– Sidney Gijzen, Commented Jul 31, 2013 at 12:24

Damien · Accepted Answer · 2013-07-31 12:36:57Z

69

If I understood you right, this is the binding you are looking for.

 data-bind="text: isApproved, css: {
    'label' :  true,
    'label-success' :  isApproved(),
    'label-important':  !isApproved()
 }"

I hope it helps.

answered Jul 31, 2013 at 12:36

Damien

8,9873 gold badges34 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wasim Over a year ago

Thanks , I didn't pay attention to the () with the isApproved property

ChesuCR · Accepted Answer · 2020-10-20 15:44:32Z

48

Ternary operator example

<span class="label"
    data-bind="text: isApproved,
               css: isApproved() == true ? 'label-success' : 'label-important'">
</span>

edited Oct 20, 2020 at 15:44

ChesuCR

9,7526 gold badges58 silver badges121 bronze badges

answered Jul 31, 2013 at 12:39

Armand

10.3k9 gold badges46 silver badges77 bronze badges

4 Comments

Wasim Over a year ago

Thanks , I didn't pay attention to the () with the isApproved property

Demian Flavius Over a year ago

This is a more elegant solution. Congrats.

bkwdesign Over a year ago

Important to use this solution: in my case, the isApproved() function is expensive and should not be evaluated more than absolutely necessary

Dhaval Pankhaniya Over a year ago

will it work runtime ? like play/pause button toggle ?

Collectives™ on Stack Overflow

using knockout to set css class with an if condition

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related