KnockoutJS css binding != true

Question

My view model is returning a true value, and I'm trying to get my template to add CSS accordingly. The problem is, I can't find the syntax for a != true.

I have something like this:

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

Which I thought would say, apply 'lw-touched' if checked === true, apply 'lw-touch' if checked === false. But that doesn't work :(. So I tried this:

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

Which also didn't work.

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

Answer 1

I posted and solved it 30 seconds later :(.

I'm leaving it because someone else might have this same problem.

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

Also I used the better syntax thanks to @MikaelÖstberg

I'm marking this as the answer so that I don't get more negative feedback :/

Answer 2

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

Consider to add the () at the binding field.

Answer 3

Thank you g.breeze, for your answer. I've been unsuccessfully trying to use the ternary operator on the css property, but never knew it could be set without the curly braces. One for the books!

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

You've bumped a two-year-old topic with your valuable answer.