Ajax を介して受信した json データをレンダリングするために口ひげを使用しています。
この数値を通貨形式で表示したい:
{{price}}
例: 12300
どうすればそれを次のようにレンダリングできますか:
"12,300"
口ひげテンプレートエンジンを使用していますか?
Ajax を介して受信した json データをレンダリングするために口ひげを使用しています。
この数値を通貨形式で表示したい:
{{price}}
例: 12300
どうすればそれを次のようにレンダリングできますか:
"12,300"
口ひげテンプレートエンジンを使用していますか?
Lucero's answerに同意しますが、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>
Mustache.js の小さな拡張機能を作成しました。これにより、{{expression | フォーマッタ}}
github で確認できます: http://jvitela.github.io/mustache-wax/
モデルを口ひげ (または実際のテンプレート エンジン) に渡す前に、これを行う必要があります。文字列操作を実行できることとは別に、問題は、すべての国が同じ数字をフォーマットするわけではないため、表示表現が異なる可能性があり、テンプレートにハードコードされるべきではないことです。