Monsieur Zartosht

Monsieur Zartosht

Who am I?

A very simple blog that belongs to a very simple full-stack web developer about his daily life and struggles through coding. here you will find many things such as music, movies, and code (lots of codes!)


What I write about


Recent Posts

Make Helper Function in Handlebars

Sometimes when using handlebars you may need to have extra functionality over your data in the template. Such as having an intelligent select element, checkbox, global variable and etc. Let's create some of this functions here.

Table of contents

    Yesterday when I was learning how to make custom cms with Express js, I came across a problem with having to hardcode my upload folder path in the templates and after some search, I found the best solution for that.

    What is helpers functions

    Helper functions are some functions that you make to extend some functionalities of some framework, applications and etc. For example, you have some functions in handlebars but none of them has logicabilty(? does that even a word!😀) in them then what if you wanted to make some decisions based on some data or make some replacements?

    How to add a helper to handlebars

    Make a file called handlebars-helper.js and in it add the following:

    module.export = {
    
    }

    Now let's create some functions and then add them to handlebars.

    Select helper

    module.exports = {
        select: function (selected, options) {
            return options.fn(this).replace(new RegExp(' value=\"' + selected + '\"'), '$&selected');
        }
    };
    

    The first param is the value of the selected option (here is status) and the second one is the content on the function body (options). Now use it in the templates like this:

    <select>
        {{#select status}}
            <option value="-1">--- Choose one ---</option>
            <option value="public">Public</option>
            <option value="private">Private</option>
            <option value="drat">Draft</option>
        {{/select}}
    </select>

    Render:

    If the status was equal to public the rendered result would be:

    <select>
        {{#select status}}
            <option value="-1">--- Choose one ---</option>
            <option value="public" selected>Public</option>
            <option value="private">Private</option>
            <option value="drat">Draft</option>
        {{/select}}
    </select>

    Render:

    Upload dir helper

    This one is really simple, just put the following in that handlebars-helpers.js file:

    module.exports = {
        uploadDir: function () {
            return "/uploads/";
        }
    };
    

    Now with these two simple and useful function your handlebars-helpers.js file should be like this:

    module.exports = {
        select: function (selected, options) {
            return options.fn(this).replace(new RegExp(' value=\"' + selected + '\"'), '$&selected');
        },
        uploadDir: function () {
            return "/uploads/";
        }
    };

    Registering Helpers in Handlebars Template Engine

    Now go to where you registered your template engine in express and add this config to that:

    const exphbs = require("express-handlebars");
    const express = require("express");
    const {select, uploadDir} = require("YOUR_PATH_TO/handlebars-helpers");
    
    const app = express();
    
    app.engine("handlebars", exphbs({
        helpers: {
            select: select,
            uploadDir: uploadDir,
        }
    }));

    Have fun!


    Posted in Express , Javascript , Node js , Web on by

    Share this post: