How to add a dynamic class in knockoutjs?

Question

Let's say i have,

<span class="cls1 cls2" data-bind="title: title" ></span>

I want to add another class via JSON object,

{ title: 'a', clas: 'cls3' }

This work's,

    <span class="cls1 cls2" data-bind="attr:{title: title,'class': 'cls1 cls2'+clas}" ></span>

But the problem is that it will add two class attributes. I need the cls1 and cls2 class on beginning. But need cls3 class after some event.

Answer 1

You should use css binding instead of attr for this. Read more about it in the documentation: http://knockoutjs.com/documentation/css-binding.html.

You code will look something like this:

<span class="cls1 cls2" data-bind="text: title, css: myClass" ></span> 

Here is working fiddle: http://jsfiddle.net/vyshniakov/gKaRF/

Answer 2

Using multiple classes:

<span
    class="yourClass"
    data-bind="css: { myClass: (true == true), theirClass: (!true == false), ourClass: true }"
>Thine Classes</span>