Knockout css binding with duplicate classes

Question

I've just got cracking with Knockout.js and have run into my first stumbling block, though I'm not sure whether this is a bug or whether I'm not doing something properly.

When using the css binding, on the first condition when applying multiple classes, if more than one class name contains a "-" only one is applied. This does not occur with subsequent conditions and if I remove the "-" from the class name, the class is successfully applied.

Fiddle: http://jsfiddle.net/pU9UR/

So this doesn't work:

 <i class="fa"  data-bind="    css: {  'fa-caret-down text-info': active() && !asc(), 'fa-caret-up text-info': active() && asc(), 'fa-unsorted text-muted': !active() }">

Whereas this does:

<i class="fa"  data-bind="    css: {  'fa-caret-down textinfo': active() && !asc(),'fa-caret-up text-info': active() && asc(), 'fa-unsorted text-muted': !active() }"></i>

Is this a bug or am I missing something?

Edit:

It appears my original diagnosis was wrong, the issue occurs when I have the same class repeated for different conditions. So the below does not work (only fa-caret-down is applied):

css: {  'fa-caret-down text-danger': active() && !asc(), 'fa-caret-up text-danger': active() && asc(), 'fa-unsorted text-muted': !active() }

But this does:

css: {  'fa-caret-down text-danger': active() && !asc(), 'fa-caret-up text-info': active() && asc(), 'fa-unsorted text-muted': !active() }

New fiddle that's easier to see: http://jsfiddle.net/pU9UR/1/

Which browser are you using? Your fiddle is working fine for me in Chrome32... jsfiddle.net/73Kh3 changed text-info to text-dandger for the better visibility — nemesv
– nemesv, Commented Feb 13, 2014 at 8:51
Chrome32, that's odd, text-danger works fine for me, but text-info on my fiddle the down caret is black - ah actually no, I've updated the question — SWa
– SWa, Commented Feb 13, 2014 at 8:56

nemesv · Accepted Answer · 2014-02-13 10:38:48Z

2

The is not a bug but the feature of how the css binding works:

The css binding adds or removes one or more named CSS classes to the associated DOM element.

So when KO goes through all of the properties of the css bound object it does the following:

takes the 'fa-caret-down text-danger' property and checks the expression active() && !asc() if it evaluates to true then it adds the new classes fa-caret-down and text-danger
takes the 'fa-caret-up text-danger' property and checks the expression active() && asc() which is the opposite of the previous so it is false and now it removes the existing classes: it could not find fa-caret-up but the text-danger is exists so it removes it.

So to make it work you need to move out the common part to use a different condition:

<i class="fa" data-bind="css: { 
    'fa-caret-down': active() && !asc(), 
    'fa-caret-up': active() && asc(), 
    'fa-unsorted text-muted': !active(), 
    'text-danger': active  }"></i>

Demo JSFiddle.

answered Feb 13, 2014 at 10:38

nemesv

140k16 gold badges424 silver badges364 bronze badges

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

1 Comment

SWa Over a year ago

Thanks, got it now, made my brain hurt a little bit though ;)

Collectives™ on Stack Overflow

Knockout css binding with duplicate classes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related