Knockout css binding renders => class=" 0 1 2 3 4 5 6 with KO 2.0

Question

I am getting a strange style text with this code:

self.styleClass = ko.computed(function () {
            return self.isFollowing() ? "button" : "secondary button";
        });

      <button data-bind="text: followButtonText,click: toggleIsFollowing, css: styleClass"></button>

it renders:

<button data-bind="text: followButtonText,click: toggleIsFollowing, css: styleClass" class=" 0 1 2 3 4 5 6 7 8 9 10 11 12">Unfollow</button>

model.styleClass() renders fine in the console

Answer 1

The semantic of the css binding has been changed from KO 2.1.0 to KO 2.2.0

From Knockout 2.2.0 released:

We’ve also made some features work more like you might always have thought they should work. For example, the css binding can now attach programmatically-generated CSS class names to elements (previously, it was limited to toggling predefined CSS class names).

So upgrade to KO 2.2.1 and it will work fine.

If you cannot upgrade you can use the attr binding as a workaround:

<button data-bind="text: followButtonText, 
                   click: toggleIsFollowing,
                   attr:{ class: styleClass}" />

Demo JSFiddle using KO 2.0.0 and attr binding