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

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.

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>