Enum Formatter

Enum formatter binding handler is specifically created to display human readable text depending on enumerable bindable value. Use case include but are not limited to displaying different status texts for different data.

Live Example

In this example numeric enumerable data is displayed in human readable text value. In case of unsupported value - that is value that is not on the list - the direct observable value will be injected into HTML.

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

Relevant code used in examples:

<label>
Raw Status: <input data-bind="textInput: binder.model.Enum.status"/> (0, 1, 2, 3) <br />
</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>
<label>
    <input type="radio" data-bind="checked: binder.model.Enum.status, checkedValue: 4" value="4" />
    Unsupported value
</label>
<br />
Formatted: <span data-bind="enumFormatter: {­data: binder.model.Enum.status, values:['Zero', 'One', 'Two', 'Three']­}"></span>

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