Now before we go further, there is one more thing I want to talk about, that is, a handlebars helper. Handlebars helpers are going to be ways for us to register functions to run to dynamically create some output. For example, inside server.js, we currently inject the current year inside of both of our app.get templates and that's not really necessary.
There is a better way to pass this data in, and this data shouldn't need to be provided because we'll always use the exact same function. We'll always take the new date getfullYear return value passing it in. Instead, we'll use a partial, and we'll set ours up right now. Now a partial is nothing more than a function you can run from inside of your handlebars templates.
All we need to do is register it and I'll do that in the server.js, following on from where we set up our Express middleware. As shown in the following code, we'll call hbs.register and we'll be registering a helper, so we'll call a registerHelper:
hbs.registerPartials(__dirname + '/views/partials')
app.set('view engine', 'hbs');
app.use(express.static(__dirname + '/public'));
hbs.registerHelper();
Now registerHelper takes two arguments:
- The name of the helper as the first argument
- The function to run as the second argument.
The first argument right here will be getCurrentYear in our case. We'll create a helper that returns that current year:
hbs.registerHelper('getCurrentYear',);
The second argument will be our function. I'll use an arrow function (=>):
hbs.registerHelper('getCurrentYear', () => {
});
Anything we return from this function will get rendered in place of the getCurrentYear call. That means if we call getCurrentYear inside the footer, it will return the year from the function, and that data is what will get rendered.
In the server.js, we can return the year by using return and having the exact same code we have app.get object:
hbs.registerHelper('getCurrentYear'), () => {
return new Date().getFullYear()
});
We'll make a new date and we'll call its getFullYear method. Now that we have a helper, we can remove this data from every single one of our rendering calls:
hbs.registerHelper('getCurrentYear, () => {
return new Date().getFullYear()
});
app.get('/', (req, res) => {
res.render('home.hbs', {
pageTitle: 'Home Page',
welcomeMessage: 'Welcome to my website'
});
});
app.get('/about', (req, res) => {
res.render('about.hbs', {
pageTitle: 'About Page'
});
});
This is going to be really fantastic because there really is no need to compute it for every page since it's always the same. Now that we've removed that data from the individual calls to render, we will have to use getCurrentYear inside the footer.hbs file:
<footer>
<p>Created By Andrew Mead - Copyright {{getCurrentYear}}</p>
</footer>
Instead referencing the current year, we will use the helper getCurrentYear, and there's no need for any special syntax. When you use something inside curly braces that clearly isn't a partial, handlebars is first going to look for a helper with that name. If there is no helper, it'll look for a piece of data with that getCurrentYear name.
In this case, it will find the helper, so everything will work as expected. We can now save footer.hbs, move into the browser, and give things a refresh. When I refresh the page, we still get Copyright 2018 in Home Page:

If I go to the About Page, everything looks great:

We can prove that data is coming back from our helper by simply returning something else. Let's comment out our helper code in server.js and before the comment, we can use return test, just like this:
hbs.registerHelper('getCurrentYear', () => {
return 'test';//return new Date().getFullYear()
});
We can now save server.js, refresh the browser, and we get tests showing up as shown here:

So the data that renders right after the Copyright word is indeed coming from that helper. Now we can remove the code so we return the proper year.