Handlebars Helpers

Handlebars supports the idea of helpers, which are special custom functions you can write to perform some special logic from within the template during runtime. A great example of a helper would be the date string formatter we've been using. Helpers can be registered globally and made available to every template file, or they can be defined per view and passed to the template on an as needed basis as a part of the ViewModel.

Global helpers

First, let's create a global helper that will be available to every Handlebars template we render. This global helper that you will create will be used to format a timestamp so that it is worded as to how long ago the event occurred. We will use this throughout our application for things such as comments and image timestamps.

The first thing we need to do is update our server/configure.js module, where we originally initially configured Handlebars as our rendering engine. We are going to add a section to define our helpers:

app.engine('handlebars', exphbs.create({
    defaultLayout: 'main',
    layoutsDir: app.get('views') + '/layouts',
    partialsDir: [app.get('views') + '/partials'],
    helpers: {
        timeago: function(timestamp) {
            return moment(timestamp).startOf('minute').fromNow();
        }
    }
}).engine);

As you can see from the additional code we added (highlighted in the preceding code), we defined the helpers property of the configuration options within create(), and inside the helpers property, we can define any number of functions we want. In this case, we defined a simple timeago function that actually uses another npm module called moment. The moment module is a great library for doing a number of different date string formatting. As we are using a new module, we need to be sure to perform require()at the top of our configure module:

var connect = require('connect'),
    path = require('path'),
    routes = require('./routes'),
    exphbs = require('express3-handlebars'),
    moment = require('moment'),

As well as actually install it via npm:

$ npm install moment --save

View-specific helpers

While defining helpers globally is nice because they are available to every view that's rendered, sometimes you might only need to define a helper for use within a single view. In this case, you can include the helper right with the ViewModel itself when calling res.render(), as shown in the following code:

var viewModel = {
  name: 'Jason',
helpers: {
    timeago: function(timestamp) {
   return 'a long time ago!';
         }
}
};
res.render('index', viewModel); 

Not only are we defining a custom helper that can be used specifically from this view in its ViewModel, but in this particular instance we are overriding the existing timeago global helper with a slightly different version that is perfectly valid.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.15.168.73