Mustache.js函数用于格式编号

Question

我正在尝试在我的jquery代码中使用mustache.js。 不幸的是，我有一个问题，用函数格式化数值。

var data = {
  "price": 12000.00,
  "format": function () {
     return function (text, render) {
       return Number( render(text) ).toLocaleString( "it-IT", { maximumFractionDigits: 2 } ) + ' €';
     }
   }
}

var template = "{{#format}}Formatted price : {{price}} {{/format}}";
var text = Mustache.render(template, data);
//output --> NaN €

我尝试使用parseInt而不是Number，但结果相同。 我怎么能这样做？谢谢

Answer 1

小胡子不是为这些东西而制作的，因为它的目的是减少逻辑。它确实支持自定义功能，但它不会很优雅。在Mustache中，您希望在将数据传递给渲染器之前进行所有格式化。

像这个{{#format}}{{price}}{{/format}}这样的Mustache模板的过程是：

• 调用format，它将原始文本（'{{price}}'）作为参数＃1和一个特殊的render()函数作为参数＃2。
• 你打电话给render(text)（这导致无论{{price}}评估到什么）
• 您对此结果进行了修改并将其返回。

这意味着您的模型中有一个数字。 render(text)把它变成了一个字符串。然后，您必须再次将该字符串解析回一个数字，然后根据您的语言环境重新格式化。这是一个非常迂回的方式，如果你预先格式化数字并且不尝试将其变成Mustache，那真的会容易得多。

对于后代，这是使用胡子的方式：

var data = {
  price: 12000.5,
  format: function () {
    return function (text, render) {
      var result = render(text);
      return parseFloat(result).toLocaleString("it-IT", {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      });
    }
  }
}

var template = "Formatted price: {{#format}}{{price}}{{/format}} €";
var result = Mustache.render(template, data);
document.querySelector("#output").textContent = result;

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>

<div id="output"></div>