How specify two css classes: from property and conditional class

Question

I know that in knockout has the ability to specify class from observable property, like this:

<div data-bind="css: Color " >

Knockout also provides the ability to specify conditional class rendering like this:

<div data-bind="css: { 'my-class' : SomeBooleanProperty  }" >

But which markup should be specified if i need those features of knockout css binding together?

I tried this, but with no luck:

<div data-bind="css: { Color, 'my-class' : SomeBooleanProperty  }" >

I have got the error:

Error: Unable to parse bindings. SyntaxError: Unexpected token ,;

I not found any example in google or in official docs.

UPDATE

I found a workaround: build up style string in code and put it to property, like this:

item.AdditionalCss(Color() + " " + (result.IsSortable() ? 'my-class' : null));

And specify this class in html:

data-bind="css: AdditionalCss "

But i little bit puzzled, i think it is dirty approach. I think it would be better to achieve the same result in markup. How can accomplish that with markup?

I'm not sure this works, but try css: { Color : true, 'my-class': SomeBooleanProperty }. — Alxandr
– Alxandr, Commented Jul 29, 2013 at 7:48
Thanks @Alxandr, but it not works, i have gotten markup: class="Color my-class", but i need value of property Color instead of property name. — testCoder
– testCoder, Commented Jul 29, 2013 at 7:55
It is very sadly that knockout not provide same binding with 'data-bind' attribute only. — testCoder
– testCoder, Commented Jul 29, 2013 at 8:06

Damien · Accepted Answer · 2013-07-29 08:10:35Z

9

Use the class binding

<div data-bind="class: myClass" >

View model :

var vm = {
     myClass : ko.observableArray(),
};
vm.myClass.push('class1');
vm.myClass.push('class2');

You can also use the class binding with a computed.

But if you don't want to use it, you can do that :

<div data-bind="attr: { 'class' :( Color() +  (SomeBooleanProperty() ? ' my-class' :'')) }">

edited Jul 29, 2013 at 8:10

answered Jul 29, 2013 at 7:49

Damien

8,9873 gold badges34 silver badges43 bronze badges

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

2 Comments

testCoder Over a year ago

Thanks, but i think it is same workaround which uses code, it would be nice if anyone give me example but with 'data-bind' markup only.

testCoder Over a year ago

Thanks, attr-binding works nice, but same result it not provided by css-binding, it is very sadly. Thanks, you helped me.

Adam Simpson · Accepted Answer · 2018-07-26 16:09:35Z

4

You can also use a classic string formatting :

<div data-bind="css: Color() + (SomeBooleanProperty ? ' my-class' : '')" >

An example of this concept in action:

var fullString = ('some' + ' ' + 'strings ') + 'and' + ' ' + 'other strings';
console.log(fullString);

edited Jul 26, 2018 at 16:09

Adam Simpson

3,6712 gold badges24 silver badges27 bronze badges

answered Jun 21, 2014 at 16:07

akhansari

1,04410 silver badges13 bronze badges

2 Comments

ecairol Over a year ago

This one worked for me, thank you very much! This is my code in case someone find it useful: <li data-bind="css: slug + ((slug == $root.currentNav()) ? ' active' : '') "> and the result is: <li class="page1 active"></li> <li class="page2"></li> <li class="page3"></li>

Mou Over a year ago

i do not understand this code Color()+(SomeBooleanProperty ? ' my-class' : '') anyone would mind to explain. thanks

Collectives™ on Stack Overflow

How specify two css classes: from property and conditional class

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related