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>