Knockout JS - Use both static class name as well as data bound class name

Question

Anyone know if I can have an html element with both a static class name as well as a dynamic, data-bound class name using KnockoutJS? Something like this:

<span class='staticClassName {{viewModelPropertyValue}}'></span>

I realize this isn't ko syntax, I'm just using this syntax to get the point across.

Answer 1

You can use the css binding to add and remove a class based on the truthiness of a value, but it sounds like your viewModelProperty is the name of a class rather than a boolean.

You can use the attr binding with the static class included like: (attr: { 'class': 'staticClassName ' + viewModelPropertyValue } or (viewModelPropertyValue() if it is an observable).

Otherwise, there is a community binding here that will add and remove a class in the manner that you are after: https://github.com/SteveSanderson/knockout/wiki/Bindings---class

Answer 2

In Knockout 2.2.0, you can!

<span class='staticClassName' data-bind='css: viewModelPropertyValue'></span>