Date formatting mustache.js

Question

I started using mustache.js and so far I am very impressed. Although I am puzzled by two things. The first leads to the second, so bear with me.

My 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)/" } ]}; 

My control function

 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 As you can see, my TargetDate needs to be parsed, but I'm not sure how to do this in my current function.

Q2 Let's say I wanted to perform some function or formatting on one or more of my objects before rendering, what is the best way to do this?

Answer 1

I also used Mustache for my projects, due to its ability to share between client / server. What I ended up with is formatting all the values ​​(date, currency) to strings on the server side, so I don't need to rely on Javascript helper functions. This may not work for you if you are doing logic against these values ​​on the client side.

You can also explore handlebars.js , which is essentially a Mustache, but with extensions that can help with client-side formatting (and more). The loss here is that you probably won’t be able to find the server-side implementation of the helms if that matters to you.

Answer 2

You can use "lambda"

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

Then in the markup:

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

From the link:

When the value is a callable object, such as a function or lambda, the object will be called and a block of text will be passed. Past text is a literal block, unrendered.

Answer 3

I created a small extension for Mustache.js that allows you to use formatters inside expressions, for example {{expression | formatter}}

In any case, you need to create a function that analyzes your date value as follows:

 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()); } }; 

And then just add the formatter to your expressions:

 {{TargetDate | date}} 

You can get the code from here: http://jvitela.imtqy.com/mustache-wax/

Answer 4

This is a long time ago, but it turned out exactly the same. Mustachejs (now) allows you to call the functions of the transferred data, and not just; in a function, the value of this is the value that is true in the section.

If my template looks like 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}} 

And data like this:

 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); 

Answer 5

You can get the timestamp using simple String methods:

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

Of course, this depends on which timestamp will be the same length each time. Another variant:

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

These methods are not specific to Mustache and can be used to manage data for any library. See the Mozilla Developer Center documentation on the substring for more information.

Answer 6

To declare a function inside json, you can always do this.

 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));