Maslosoft Binder Logo Maslosoft Binder Documentation
Knockout JS tracker and binding handlers with coffee and sugar

CSS Classes

The CSS classes binding allows You to apply array of classes to element. When class is removed from observable array, it will be removed from item too. Except array, class list can be provided as space separated class names list, just like on class attribute.

This binding will not change existing classes or those added by other bindings. Will change existing classes only if provided on classes list observable value.

To keep track which class to remove, this binding will store added classes list in data-css-classes working element attribute.

Live Example

Example Class Name Enabled Actions
Element
btn-default
Element
btn-success
Element
big-border
Element
shadowed
Element
outlined

Element below contains btn and btn-success CSS classes. The btn class will be always present, however btn-success might be disabled, because it is toggleable as it is present in binder.model.decorate.classes array and binder.model.decorate.classList list.

Styled with array
Styled classes list

Relevant code used in examples:

<div data-bind="cssClasses: binder.model.decorate.classes" class="btn btn-success">
    Styled with array
</div>
<div data-bind="cssClasses: binder.model.decorate.classList" class="btn btn-success">
    Styled classes list
</div>

<script>
    window.onload = (function () {­
        
        var classes = ["btn-default","btn-success","big-border","shadowed"];
        var classList = "btn-default btn-success big-border shadowed";
        binder.model.decorate = new Maslosoft.Koe.CssClasses({­
            classes: classes,
            classList: classList
        ­});

        ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
    ­});
</script>