Maslosoft

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

CSS Columns

This binding handler will apply bootstrap CSS columns based on value. There are two variants of this binding:

  • cssColumnSizes - will apply column sizes as passed to observable model
  • cssColumns - will apply classes to create grid with number of columns as passed to observable model

Value passed to bindings must be object with properties named same as sizes and size width as values.

Configuring

Both binding can be configured by specifying sizes to CSS classes template. The configuration properties are:

  • Maslosoft.Binder.CssColumnSizes.columns for cssColumnSizes binding
  • Maslosoft.Binder.CssColumns.columns for cssColumns binding

Class names contain placeholder {num} which will be replaces by observable value. Property columns must be object with property names corresponding to size names same as in passed observable. Values must be class names containing {num} placeholder.

Example configuration

Maslosoft.Binder.CssColumnSizes.columns = {
    'xs': 'col-xs-{num}',
    'sm': 'col-sm-{num}',
    'md': 'col-md-{num}',
    'lg': 'col-lg-{num}'
}

Live Example

Current device size: Large Medium Small Very small

cssColumnSizes binding

In example of cssColumnSizes binding column sizes are dynamically adjusted depending on observable value.


1
2
3
4
5
6
7
8
9
10
11
12

1
2
3
4
5
6
7
8
9
10
11
12

1
2
3
4
5
6
7
8
9
10
11
12

1
2
3
4
5
6
7
8
9
10
11
12
First column
Second column
Third column

cssColumns binding

In example of cssColumns number of columns depends on observable value.


1
2
3
4
6
12

1
2
3
4
6
12

1
2
3
4
6
12

1
2
3
4
6
12
First column
Second column
Third column

Relevant code used in examples:

<div class="row" data-bind="with: binder.model.layout">
    <div data-bind="cssColumnSizes: sizes" class="btn-success">
        First column
    </div>
    <div data-bind="cssColumnSizes: sizes" class="btn-success">
        Second column
    </div>
    <div data-bind="cssColumnSizes: sizes" class="btn-success">
        Third column
    </div>
</div>
<div class="row" data-bind="with: binder.model.layout">
    <div data-bind="cssColumns: columns" class="btn-success">
        First column
    </div>
    <div data-bind="cssColumns: columns" class="btn-success">
        Second column
    </div>
    <div data-bind="cssColumns: columns" class="btn-success">
        Third column
    </div>
</div>
<script>
	window.onload = (function(){­
		binder.model.layout = new Maslosoft.Koe.Columns({­
            sizes: new Maslosoft.Koe.UiColumns,
            columns: new Maslosoft.Koe.UiColumns({­
                lg: 3,
                md: 3,
                sm: 3,
                xs: 3
            ­})
		­});
		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
	­});
</script>
Documentation Made with Zamm , Gathered by Staple