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.

Damn it...just posted and solved it 30 seconds later. I'm leaving it cause someone else might have this problem... data-bind="css: {'lw-touched': checked, 'lw-touch': checked() !== true}"> — farina
– farina, Commented Feb 16, 2012 at 22:30
Actually you can use just !checked(). Whenever you are negating an expression you need to get the underlying value using the parenthesis. — Mikael Östberg
– Mikael Östberg, Commented Feb 16, 2012 at 22:39

farina · Accepted Answer · 2012-02-17 20:18:09Z

20

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

answered Feb 17, 2012 at 20:18

farina

3,5846 gold badges34 silver badges44 bronze badges

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

1 Comment

Raj Pawan Gumdal Over a year ago

Would be great if you highlight that the brackets () made the difference. Nevermind, now my comment serves the purpose! ;)

g.breeze · Accepted Answer · 2014-07-06 21:05:00Z

1

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

Consider to add the () at the binding field.

answered Jul 6, 2014 at 21:05

g.breeze

1,96519 silver badges24 bronze badges

1 Comment

channa ly Over a year ago

after applying this i got something strange: class='0 1 2 3' in case of play value and class='0 1 2 3 4' for pause value. it seem like knockout took string.length value instead of string for class attribute. any idea ?

iSofia · Accepted Answer · 2014-10-14 13:22:49Z

1

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.

answered Oct 14, 2014 at 13:22

iSofia

1,5772 gold badges23 silver badges41 bronze badges

Collectives™ on Stack Overflow

KnockoutJS css binding != true

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related