KnockoutJS css binding! = True

Question

My view model returns true , and I'm trying to get my template to add CSS accordingly. The problem is that I cannot find the syntax for a! = True.

I have something like this:

<div data-bind="css: {'lw-touched': checked, 'lw-touch': !checked}"></div> 

What I would say, apply "lw-touched" if === true, apply "lw-touch" if === false. But this does not work :( Therefore, I tried this:

 <div data-bind="css: {'lw-touched': checked, 'lw-touch': checked !== true}"></div> 

Which didn't work either.

I am sure there is a way to do this! I just can't find it at the moment.

Answer 1

I published and solved it after 30 seconds :(.

I leave this because someone might have the same problem.

 data-bind="css: {'lw-touched': checked, 'lw-touch': !checked()}"> 

I also used the best syntax thanks to @ MikaelÖstberg

I mark this as an answer, so that I don't get any more negative feedback: /

Answer 2

 data-bind="css: isPlaying() ? 'play' : 'pause'" 

Pay attention to the addition () in the binding field.

Answer 3

Thank you g.breeze for your reply. I tried unsuccessfully to use the ternary operator in the css property, but I never knew that it could be set without curly braces. One for the books!

 data-bind="css: ifThisExpressionIsTrue() ? 'applyThisClass andAnother' : 'elseThisClass'" 

You came across a two year topic with your valuable answer.