- Building Single:page Web Apps with Meteor
- Fabian Vogelsteller
- 599字
- 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 ourmy-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 thehome
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 ourhome.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 themoment
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 namedtemplate-helpers.js
and save it to ourmy-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.
- Flask Web全棧開發實戰
- Java入門很輕松(微課超值版)
- Android 9 Development Cookbook(Third Edition)
- Python Deep Learning
- Learning ASP.NET Core 2.0
- Magento 2 Development Cookbook
- HTML5游戲開發案例教程
- C語言程序設計實踐教程
- Learning Data Mining with R
- Unity Game Development Scripting
- HTML5與CSS3基礎教程(第8版)
- Android Wear Projects
- ElasticSearch Cookbook(Second Edition)
- Android開發三劍客:UML、模式與測試
- 寫給程序員的Python教程