9

我已经开始使用 mustache.js，到目前为止我印象非常深刻。虽然有两件事让我感到困惑。第一个导致第二个，所以请耐心等待。

我的 JSON 

{"goalsCollection": [
    {
        "Id": "d5dce10e-513c-449d-8e34-8fe771fa464a",
        "Description": "Multum",
        "TargetAmount": 2935.9,
        "TargetDate": "/Date(1558998000000)/"
    },
    {
        "Id": "eac65501-21f5-f831-fb07-dcfead50d1d9",
        "Description": "quad nomen",
        "TargetAmount": 6976.12,
        "TargetDate": "/Date(1606953600000)/"
    }
]};

我的处理函数

function renderInvestmentGoals(collection) {
    var tpl = '{{#goalsCollection}}<tr><td>{{Description}}</td><td>{{TargetAmount}}</td><td>{{TargetDate}}</td></tr>{{/goalsCollection}}';
    $('#tblGoals tbody').html('').html(Mustache.to_html(tpl, collection));
}

Q1 如您所见，我的“TargetDate”需要解析，但我不确定如何在当前函数中执行此操作。

Q2 假设我想在渲染之前对我的一个或多个对象执行一些功能或格式化，那么最好的方法是什么？

4

6 回答 6

20

您可以使用“lambda”

"TargetDate": "/Date(1606953600000)/",
"FormatDate": function() {
    return function(rawDate) {
        return rawDate.toString();
    }
}, ...

然后在标记中：

<td>
{{#FormatDate}}
    {{TargetDate}}
{{/FormatDate}}
</td>

从链接：

当值是可调用对象时，例如函数或 lambda，该对象将被调用并传递文本块。传递的文本是未渲染的文字块。

于 2012-04-08T18:00:15.580 回答
9

我为 Mustache.js 创建了一个小扩展，它可以在表达式中使用格式化程序，例如 {{expression | 格式化程序}}

无论如何，您都需要创建一个函数来解析您的日期值，如下所示：


      Mustache.Formatters = {
        date: function( str) {
          var dt = new Date( parseInt( str.substr(6, str.length-8), 10));
          return (dt.getDate() + "/" + (dt.getMonth() + 1) + "/" + dt.getFullYear());
        }
      };

然后只需将格式化程序添加到您的表达式中：

{{TargetDate | date}}

你可以从这里获取代码：http: //jvitela.github.io/mustache-wax/

于 2015-01-06T09:12:53.437 回答
7

这是很久以前的事了，但一直在寻找完全相同的东西。Mustachejs（现在）允许您调用传递数据的函数，不仅如此；在函数中，值this是一个部分中的任何值。

如果我的模板是这样的：

{{#names}}
    <p>Name is:{{name}}</p>
    <!-- Comment will be removed by compileTemplates.sh
         #lastLogin is an if statement if lastLogin it'll do this 
         ^lastLogin will execute if there is not lastLogin      
    -->
    {{#lastLogin}}
    <!-- 
      formatLogin is a method to format last Login 
      the function has to be part of the data sent 
      to the template
    -->
    <p>Last Login:{{formatLogin}}</p>
    {{/lastLogin}}
    {{^lastLogin}}
    not logged in yet
    {{/lastLogin}}
    {{#name}}
     passing name to it now:{{formatLogin}}
    {{/name}}
{{/names}}

和这样的数据：

var data={
    names:[
        {name:"Willy",lastLogin:new Date()}
    ],
    formatLogin:function(){
          //this is the lastDate used or name based on the block
                  //{{#name}}{{formatLogin}}{{/name}}:this is name
                  //{{#lastLogin}}{{formatLogin}}{{/lastLogin}}:this is lastLogin
          if(!/Date\]$/.test(Object.prototype.toString.call(this))){
              return "Invalid Date:"+this;
          }
          return this.getFullYear()
            +"-"+this.getMonth()+1
            +"-"+this.getDate();
    }
};
var output = Mustache.render(templates.test, data);
console.log(output);
于 2014-05-17T13:04:42.357 回答
1

您可以使用简单的 String 方法获取时间戳：

goalsCollection.targetDate = goalsCollection.targetDate.substring(6,18);

当然，这取决于您的时间戳每次都具有相同的长度。另一种选择是：

goalsCollection.targetDate = 
  goalsCollection.targetDate.substring(6, goalsCollection.targetDate.length - 1);

这些技术并非特定于 Mustache，可用于操作任何库的数据。有关更多详细信息，请参阅有关子字符串的 Mozilla 开发人员中心文档。

于 2012-04-08T17:59:27.743 回答
1

要在 json 中声明函数，您始终可以这样做。

var json = '{"RESULTS": true, "count": 1, "targetdate" : "/Date(1606953600000)/"}'

var obj = JSON.parse(json);
obj.newFunc = function (x) {
  return x;
}

//OUTPUT
alert(obj.newFunc(123));
于 2012-11-19T23:52:49.843 回答
-2

我也一直在我的项目中使用 Mustache，因为它能够在客户端/服务器之间共享。我最终做的是将所有值（日期、货币）格式化为服务器端的字符串，所以我不必依赖辅助 Javascript 函数。但是，如果您在客户端对这些值进行逻辑处理，这可能对您不起作用。

您可能还想考虑使用handlebars.js，它本质上是 Mustache，但带有可能有助于客户端格式化（以及更多）的扩展。这里的损失是，如果这对您很重要，您可能无法找到车把的服务器端实现。

于 2012-04-08T17:59:05.490 回答