Knockout binding css class to an observed model property

Question

I want to bind a divs css class to a property of the view model like this:

<div id="statusIndicator" data-bind="css: selectedPriority"> 

But this generates the result:

 <div id="statusIndicator" class=" 0 1 2 3"> 

This is the view model:

myViewModel = {     selectedPriority: ko.observable('High'),     Company: ko.observable("Bert"),     Rows: ko.observableArray([          new row(),          new row(),          new row()     ]),     Tabs: ['High', 'Medium', 'Low'],      selectPriority: function (tab) {         this.selectedPriority(tab);     } }; 

So when i load the page that uses this view model i want the div to be:

<div id="statusIndicator" class="High"> 

What am i doing wrong?

Answer 1

For this situation you can do:

<div data-bind="attr: { 'class': selectedPriority}"> 

The only downside to this method is that it will set the class directly rather than toggle a class on or off, so if you are using multiple classes, then selectedPriority would need to contain the complete list of classes.