formatting spacebars outputs

2019-09-16 06:44发布

问题:

I'm using meteor/spacebars and trying to format the output from an {{#each}}. I've found this question previously asked here but I've tried to apply the answers and for what ever reason they just clear the fields that were supposed to be formatted to give no output at all and I can't for the life of me figure out why.

This is what my mongo entries look like:

{ "changes": [
  {
    "name": "oBf4vPN6TcGw8mbok",
    "date": "2016-06-07T01:48:37.695Z",
    "score": "general",
    "value": "5"
  },
  {
    "name": "oBf4vPN6TcGw8mbok",
    "date": "2016-06-07T01:48:38.361Z",
    "score": "general",
    "value": "-5"
  }
}

and this is the HTML:

{{#each changes}}
    <tr>
        <td>{{name}}</td>
        <td>{{date}}</td>
        <td>{{score}}</td>
        <td>{{value}}</td>
    </tr>
{{/each}}

I'm trying to format the 'date' into something more readable and the 'name' field to find username of the user that corresponds to that code. It looks like I'm going to want to apply 'register helpers' which I haven't used before and can't find much information about -except here- but when I copy and paste the following code into my client-side javascript file it simply clears the output and returns and blank space

UI.registerHelper('formatTime', function(context, options) {
  if(context)
    return moment(context).format('MM/DD/YYYY, hh:mm');
});

回答1:

Josh,

Here is a working sample meteor application I put together to show you how this works:

Working Test Project:

Moment JS and Meteor Test - on Github

The two files you're mostly interested in are: main.html and main.js

This above example gives the following output:

It is now (unconverted): 1465357853653
It is now (converted): June 7th, 2016
It was as some time (unconverted): 2016-06-07T01:48:37.695Z
It was as some time (converted): June 6th, 2016

Now to my lengthy answer:

I'm going to assume you have a file like this:

some_template.html:
-------------------

<template name="someTemplate">

{{#each changes}}
    <tr>
        <td>{{name}}</td>
        <td>{{date}}</td>
        <td>{{score}}</td>
        <td>{{value}}</td>
    </tr>
{{/each}}

</template>

Make another file like this:

helpers.js:
-----------------
Template.registerHelper('ISOToHuman', ( isoString ) => {
  if ( isoString ) {
    return moment( isoString ).format( 'MMMM Do, YYYY' );
  }
});

And then use it like this:

{{ISOToHuman "ISO string here"}}

In your case:

{{#each changes}}
    <tr>
        <td>{{name}}</td>
        <td>{{ISOToHuman date}}</td>
        <td>{{score}}</td>
        <td>{{value}}</td>
    </tr>
{{/each}}

Also make sure you have momentjs installed. Run this in your terminal/console:

$ meteor add momentjs:moment

(note: '$' is the console cursor, do not include it when running the command)

Sources:

Here are links to the pages that helped me create this answer for you:

Test Github project setup for this question

Meteor Chef - Using Global Template Helpers

Atmosphere: momentjs:moment