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?

Answer 1

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' :'')) }">

Answer 2

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