Getting css class attribute data-binding to append not replace

Question

Using the Following Code, how do I go about getting the replace tag to append world to the class so that it has class="hello world" like the first one?

Kendo UI Snippet

 <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css"/>
 <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.rtl.min.css"/>
 <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.silver.min.css"/>
 <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.mobile.all.min.css"/>

 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>

 <span data-bind="css:{world: isOnline, admin: isAdmin}" class="hello">John Doe</span>
 <div data-bind="attr:{ class: fooA }" class="hello">replace</div>
 <script>
 var viewModel = kendo.observable({
     isOnline: true,
     isAdmin: false,
     fooC: "test"
 });

   var viewModelA = kendo.observable({
     fooA: "world"
   });


 kendo.bind($("span"), viewModel);
 kendo.bind($("div"), viewModelA);
 </script> </body> </html>

Answer 1

I have prepared a dojo for you here: https://dojo.telerik.com/EGEsiyov/4

This uses a custom binder that extends the kendo MVVM framework for you.

I have created a new keyword called appendClass which will add the class to the existing classes defined.

The code which does the work is this:

 kendo.data.binders.appendClass = kendo.data.Binder.extend({
            refresh: function() {
                var value = this.bindings["appendClass"].get();
                $(this.element).addClass(value);

            }
        });

This is then applied to your element like so:

 <div data-bind="appendClass: fooA " class="hello">replace</div>

All this does is look for the binding called appendClass and then using the addClass function adds whatever the value is being provided. so in my dojo i have got the css classes doing different things based on the element type so you can see it in action.

You can see more info about custom binders here: https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/custom