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