Geek asks and answers

Css knockout binding with repeating classes

I just hacked into Knockout.js and ran into my first stumbling block, although I'm not sure if this is a mistake or I am not doing something right.

When using the css binding , under the first condition when applying multiple classes, if more than one class name is used, only one is used - only one. This does not happen with the following conditions, and if I remove the “-” from the class name, the class will be successfully applied.

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

So this does not 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() }">

While it 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 mistake or am I missing something?

Edit:

, , , . , ( fa-caret-down):

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

:

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

, : http://jsfiddle.net/pU9UR/1/

+3
1

, css:

css CSS DOM.

, KO css, :

  • 'fa-caret-down text-danger' active() && !asc(), true, fa-caret-down text-danger
  • 'fa-caret-up text-danger' active() && asc(), , false, : it fa-caret-up, text-danger , .

, , , :

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

JSFiddle.

+2

More articles:


All Articles