how can i format decimal to currency format in mustache?

Question

I'm using mustache to render json data received through Ajax.

I want to render this number in currency format:

{{price}}

e.g.: 12300

How can I render it as:

"12,300"

using mustache templating engine ?

Answer 1

Mustache is very minimalistic and doesn't provide any support for this.

You either have to supply the formatted data or a function returning the formatted data

{ priceDecimal: function () { return formatDecimal(this.price); } }

Another alternative is to use handlebars.js which supports helper functions

Handlebars.registerHelper('decimal', function(number) {
  return formatDecimal(number);
});

and use it like this

{{decimal price}}

Answer 2

While I agree with Lucero's answer, it is possible to use a function in Mustache to format your data.

Simple template:

<ul>
    {{#price}}
        <li>{{commaFormat}}</li>
    {{/price}}
</ul>

JavaScript to process the data with a formatting function for your prices:

var tpl = $('#tpl').html(),
    data = {
        price: ['1234', '123', '123456', '1234567890'],
        commaFormat: function() {
            // adapted from https://stackoverflow.com/questions/2901102/how-to-print-number-with-commas-as-thousands-separators-in-javascript
            return this.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
    },
    html = Mustache.to_html(tpl, data);

document.write(html);​

Resulting HTML:

<ul>
    <li>1,234</li>
    <li>123</li>
    <li>123,456</li>
    <li>1,234,567,890</li>
</ul>

Here's the working jsFiddle to inspect and play with further.

Answer 3

I have created a small extension for Mustache.js which enables the use of formatters inside of expressions, like {{expression | formatter}}

You can check it in github: http://jvitela.github.io/mustache-wax/

Answer 4

You should do that before you pass your model into mustache (or any template engine really). Apart from being able to do string operationd, the issue is that not all countries format the numbers the same, so that the display representation may differ and shouldn't be hardcoded in the template.

Answer 5

I use the Handlebars NumeralHelper package from https://www.npmjs.com/package/handlebars.numeral

First, install (and optionally save it to your package.json):

npm install --save handlebars.numeral

Next, load the helper:

var Handlebars = require('handlebars');
var NumeralHelper = require("handlebars.numeral");
NumeralHelper.registerHelpers(Handlebars);

Finally, use it in your page:

<script>
myNumber = 12300:
</script>

 <div>
 {{ number myNumber }}
 </div>

The output for this example is 12,300.