不朽情缘为什么一直输

書名： Building Single：page Web Apps with Meteor
作者名： Fabian Vogelsteller
本章字?jǐn)?shù)： 599字
更新時(shí)間： 2021-08-06 19:29:38

Listing posts

Now that we have walked through all ways of using helpers and data, I want to introduce a block helper named {{#each}}, which we will probably find the most useful.

If we go through all the examples completed up to now, we can see that it is better to delete all the examples of data context from our home template, the examples.html file, and its examples.js JavaScript file so that we can continue to build our blog cleanly.

The next step is to add a list of blog entries to our home page. For this, we need to create a template for a post preview. This can be done by performing the following steps:

We create a file called postInList.html in our my-meteor-blog/client/templates folder and save it with the following code snippet:

<template name="postInList">
  <div class="postListItem">
    <h2><a href="#">{{title}}</a></h2>
    <p>{{description}}</p>
    <div class="footer">
      Posted by {{author}}
    </div>
  </div>
</template>

This template will be used for each post we display in the home page.

To make it appear, we need to add a {{#each}} helper to the home template, as follows:
```
{{#each postsList}}
  {{> postInList}}
{{/each}}
```
When the postsList helper, which we pass to the {{#each}} block helper, returns an array, the content of {{#each}} will be repeated for each item in the array, setting the array item as the data context.

To see this in action, we add the postsList helper in our home.js file to the template helpers, as follows:

Template.home.helpers({
  // other helpers ...
  postsList: function(){
    return [
      {
        title: 'My Second entry',
        description: 'Borem sodum color sit amet, consetetur sadipscing elitr.',
        author: 'Fabian Vogelsteller',
        timeCreated: moment().subtract(3, 'days').unix()
      },
      {
        title: 'My First entry',
        description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
        author: 'Fabian Vogelsteller',
        timeCreated: moment().subtract(7, 'days').unix()
      }
    ];
  }
});

As we can see, we return an array where each item is an object containing our post's data context. For timeCreated, we use the moment function of our previously added third-party package. This will generate dummy timestamps of a few days in the past. If we now go to our browser, we will see the two posts listed, as shown in the following screenshot:
To display timeCreated from our post item in the correct format, we need to create a helper function to format the timestamp. However, because we want to use this helper in other templates later, we need to make it a global helper that can be accessed by any template. To do this, we create a file named template-helpers.js and save it to our my-meteor-blog/client folder, as it doesn't belonging to any specific template.

To register a global helper, we can use Meteor's Template.registerHelper function:

Template.registerHelper('formatTime', function(time, type){
  switch(type){
    case 'fromNow': 
      return moment.unix(time).fromNow();
    case 'iso':
      return moment.unix(time).toISOString();
    default:
      return moment.unix(time).format('LLLL');
  }
});

Now, we only have to add the helper to our postInList template by replacing the content of the footer with the following code snippet:

<div class="footer">
  <time datetime="{{formatTime timeCreated "iso"}}">Posted {{formatTime timeCreated "fromNow"}} by {{author}}</time>
</div>

Now, if we save both the files and go back to our browser, we will see a relative date added to our blog post's footer. This works because we pass the time and a type string to the helper, as follows:

{{formatTime timeCreated "fromNow"}}

The helper then returns the formatted date using a moment function.

With this global helper, we can now format any Unix timestamp, in any template to relative times, ISO time strings, and a standard date format (using the LLLL format, which converts to Thursday, September 4, 1986, 8:30 P.M.).

Now that we have already used the {{#with}} and {{#each}} block helpers, let's take a look at the other default helpers and syntax that Blaze uses.

官术网_书友最值得收藏!

Building Single：page Web Apps with Meteor

Listing posts