Ajaxを介して受信したjsonデータをレンダリングするために口ひげを使用しています。
この数値を通貨形式で表示したい:
{{price}}
例:12300
どうすれば次のようにレンダリングできますか?
"12,300"
口ひげテンプレートエンジンを使用していますか?
口ひげは非常にミニマルであり、これをサポートしていません。
フォーマットされたデータまたはフォーマットされたデータを返す関数を指定する必要があります
{ priceDecimal: function () { return formatDecimal(this.price); } }
別の方法は、ヘルパー関数をサポートする handlebars.js を使用することです。
Handlebars.registerHelper('decimal', function(number) {
return formatDecimal(number);
});
このように使用します
{{decimal price}}
Luceroの答え に同意しますが、 Mustacheの関数 を使用してデータをフォーマットすることは可能です。
シンプルなテンプレート:
<ul>
{{#price}}
<li>{{commaFormat}}</li>
{{/price}}
</ul>
価格のフォーマット機能を使用してデータを処理するJavaScript:
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);
結果のHTML:
<ul>
<li>1,234</li>
<li>123</li>
<li>123,456</li>
<li>1,234,567,890</li>
</ul>
これが 動作中のjsFiddle で、さらに詳しく調べて遊んでください。
Mustache.jsの小さな拡張機能を作成しました。これにより、式内でフォーマッターを使用できるようになります。フォーマッター}}
Githubで確認できます: http://jvitela.github.io/mustache-wax/
モデルを口ひげ(または実際には任意のテンプレートエンジン)に渡す前に、これを行う必要があります。文字列操作を実行できることは別として、問題は、すべての国が数値を同じ形式にするわけではないため、表示表現が異なる可能性があり、テンプレートにハードコーディングしないでください。
https://www.npmjs.com/package/handlebars.numeral のHandlebarsNumeralHelperパッケージを使用しています
まず、インストールします(オプションでpackage.jsonに保存します)。
npm install --save handlebars.numeral
次に、ヘルパーをロードします。
var Handlebars = require('handlebars');
var NumeralHelper = require("handlebars.numeral");
NumeralHelper.registerHelpers(Handlebars);
最後に、ページで使用します。
<script>
myNumber = 12300:
</script>
<div>
{{ number myNumber }}
</div>
この例の出力は12,300
です。