Maslosoft Binder Documentation
Knockout JS tracker and binding handlers with coffee and sugar
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: '¥'
"></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>