CSS Class

These are basically shortcuts to enable or disable common CSS classes if expression evaluates to true. Syntax is very simple, and allows more clean bindings definition. New bindings can be added by providing custom options.

Separate view logic from style name

These has advantage over css binding, in that it defines how should be element styled, but it does not explicitly define concrete CSS class on binding. Classes can be changed by options. In this example selected class is substituted with btn-danger, by following code:

ko.bindingHandlers.selected.options.className = "btn-danger"

This needs to be done before applying bindings.

Adding new CSS Class binding handlers

New binding handlers can be added easily, as show in this example with custom binding. This can be done using just one line, passing binding handler name as first parameter to register method, and apropriatelly cofigured instance of Maslosoft.Binder.CssClass. The syntax is as following:

Maslosoft.Binder.register(
            'myBindingName',
            new Maslosoft.Binder.CssClass({
            className: 'css-class-name'
        }));

Using CSS Class bindings

To use this binding on element, place apropriate data bind attribute:

data-bind="selected: binder.model.selected.isSelected"

When binder.model.selected.isSelected value evaluates to true, CSS Class configured for selected binding will be added, in this case knockout will add btn-danger

Using with punches

There is also alternative syntax available, using knockout punches:

<span selected="{­{­binder.model.selected.isSelected}­}­">With punches</span>

Notice that there are no data bind attribute, but attribute named same as binding name, with value wrapped with double curly braces.

Live example

Should be selected if isSelected evaluates to true.

Should be active if isSelected evaluates to true.

Should be disabled if isSelected evaluates to true.

Should be custom if isSelected evaluates to true.

Relevant code used in examples:

<span data-bind="selected: binder.model.selected.isSelected" class="btn">
	Test Area
</span>
<span selected="{­{­binder.model.selected.isSelected­}­}" class="btn">With punches</span>
<span data-bind="active: binder.model.active.isSelected" class="btn">
	Test Area
</span>
<span active="{­{­binder.model.active.isSelected­}­}" class="btn">With punches</span>
<span data-bind="disabled: binder.model.disabled.isSelected" class="btn">
	Test Area
</span>
<span disabled="{­{­binder.model.disabled.isSelected­}­}" class="btn">With punches</span>
<span data-bind="custom: binder.model.custom.isSelected" class="btn">
	Test Area
</span>
<span custom="{­{­binder.model.custom.isSelected­}­}" class="btn">With punches</span>
<script>
	window.onload = (function () {­
		// Define custom binding
		Maslosoft.Binder.register(
		    'custom',
            new Maslosoft.Binder.CssClass({­
                className: 'custom'
            ­}));

		binder.model.selected = new Maslosoft.Koe.Selected({­isSelected: true­});
		binder.model.active = new Maslosoft.Koe.Selected({­isSelected: false­});
		binder.model.disabled = new Maslosoft.Koe.Selected({­isSelected: false­});
		binder.model.custom = new Maslosoft.Koe.Selected({­isSelected: false­});
		// Re-style selected binding
		ko.bindingHandlers.selected.options.className = "btn-danger";
		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
	­});
</script>