时间戳

首页 > 解决方案 > 用于格式号的 Mustache.js 函数

jquery - 用于格式号的 Mustache.js 函数

问题描述

我正在尝试在我的 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 但结果相同。
我怎么能这样做？谢谢

标签： jquerymustache

解决方案

胡子不是为这些事情而设计的，因为它的目的是没有逻辑的。它确实支持自定义功能，但不会很优雅。在 Mustache 中，您需要在将数据传递给渲染器之前进行所有格式化。

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

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

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

对于后代，这是使用 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>

推荐阅读