How to alter the display of what Spacebars outputs

2019-08-03 04:49发布

问题:

So I have something like this in the template:

{{#each posts}}
    <li>{{date}}</li>
{{/each}}

This displays fine, but the problem is that my "date" variable comes out as Sat Feb 07 2015 19:47:13 GMT-0800 (PST), which is accurate but kind of long and unneccessary.

I want the date to appear simpler, like February 7, 2015 instead. However, please forgive me for my lack of understanding, but the only way in which I know how to do this is to store it in the pretty format to begin with, but this doesn't seem to be efficient if I have to do this every time I want something to look a little different.

Ideally, I'd like to wrap it in a moment() and produce something like this:

moment(date).format("MMMM Do YYYY")

I tried putting in this instead, but it doesn't work:

{{#each posts}}
    <li>{{moment(date).format("MMMM Do YYYY")}}</li>
{{/each}}

回答1:

Add a helper

Template.yourTemplate.helpers({
  formattedDate: function(){
    return moment(this.date).format("MM/DD/YYYY");  // or whatever format you prefer
  }
});


回答2:

You can create a register helper to handle the formatting of date:

helper.js

Template.registerHelper('FormatDate', function(date){
    return moment(date).format("MMMM Do YYYY")
})

Now you can do:

{{#each posts}}
    <li>{{FormateDate date}}</li>
{{/each}}


回答3:

Try with this.

Template.example.rendered = function(){
//here we are getting a new date
var d = moment(new Date());
//here we take the li element and we set it on the html
document.getElementById("dateFormated").innerHTML = d.format('LL');
}


<template name="example">
<li id="dateFormated"> </li>
</template>

Upate

Since you are using a {{#each}} iterator

You can do this.

var d = moment(new Date()).format('LL');

or

var d = moment(new Date());
dFormat = d.format('LL');

On the insert, insert a field like Posts.insert({submitted:dFormat})

and on the {{each}} call like you have

{{#each posts}}
    <li>{{subbmited}}</li>
{{/each}}

Without inserting on Databse (Another Option)

Template.example.helpers({
  formattedData:function(){
   return moment(new Date()).format('LL');
  } 
})

{{#each posts}}
        <li>{{formattedData}}</li>
    {{/each}}