How specify two css classes: from property and conditional class

css, knockout.js, model-binding

Solution

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

Problem

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?

Original source