Enum CSS Formatter

This binding handler is specifically created to apply CSS classes depending on enumerable bindable value. Use case include but are not limited to displaying different colors for different status of data.

Live Example

In this example proper color is displayed based on numeric value. Additionally label is has text value set via Enum Formatter

checkedValue in this example is required here, as status values are integers.

Relevant code used in examples:

<label>
	Raw Status Value <input data-bind="textInput: binder.model.Enum.status"/> (0, 1, 2, 3)
	</label>
	<br />
	<label>
		<input type="radio" data-bind="checked: binder.model.Enum.status, checkedValue: 0" value="0" />
		Status Zero
	</label>
	<label>
		<input type="radio" data-bind="checked: binder.model.Enum.status, checkedValue: 1" value="1" />
		Status One
	</label>
	<label>
		<input type="radio" data-bind="checked: binder.model.Enum.status, checkedValue: 2" value="2" />
		Status Two
	</label>
	<label>
		<input type="radio" data-bind="checked: binder.model.Enum.status, checkedValue: 3" value="3" />
		Status Three
	</label>
	<br />
	Formatted: <span class="label" data-bind="enumCssClassFormatter: {­data: binder.model.Enum.status, values:['label-danger', 'label-warning', 'label-info', 'label-success']­}, enumFormatter: {­data: binder.model.Enum.status, values:['Zero', 'One', 'Two', 'Three']­}"></span>
	<br />

<script>
	window.onload = (function(){­
		binder.model.Enum = new Maslosoft.Koe.Enum({­status: 1­});
		ko.applyBindings({­model: binder.model­}, document.getElementById('ko-binder'));
	­});
</script>