formatting spacebars outputs

风流意气都作罢 提交于 2019-12-12 05:46:55

问题


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



来源:https://stackoverflow.com/questions/37691744/formatting-spacebars-outputs

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!