Menu

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

Edit

Decimal Formatter

Decimal formatter is a one way binding that can be used to format floating point values. This includes setting precision, decimal separator, thousand separator as well allows adding prefixes and suffixes - mostly for currencies displaying.

Live Example

Raw Value
Formatted
Formatting customized
Formatting prefix
Formatted with ko punches

Relevant code used in examples:

<table class="table table-condensed">
	<tr>
		<th>Raw Value</th>
		<td>
			<input data-bind="textInput: binder.model.DecimalFormatter.value"/>
		</td>
	</tr>
	<tr>
		<th>Formatted</th>
		<td>
			<span data-bind="decimalFormatter: binder.model.DecimalFormatter.value"></span>
		</td>
	</tr>
	<tr>
		<th>Formatting customized</th>
		<td>
			 <span 
			 data-bind="
			 	decimalFormatter: binder.model.DecimalFormatter.value, 
			 	precision: 3, 
			 	thousandSeparator: ',', 
			 	decimalSeparator: '.', 
			 	suffix: '&yen;'
			 	"></span>
		</td>
	</tr>
	<tr>
		<th>Formatting prefix</th>
		<td>
			<span 
			data-bind="
				decimalFormatter: binder.model.DecimalFormatter.value, 
				prefix: '$'
				"></span>
		</td>
	</tr>
	<tr>
		<th>Formatted with ko punches</th>
		<td>
			<span decimalFormatter="{­binder.model.DecimalFormatter.value­}­}"></span>
		</td>
	</tr>
</table>

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