Reading list Switch to dark mode

    How To Use Sub Template In Handlebar.js

    Updated 9 July 2016


    Today we will learn how to design and use sub-template in handlebar.js You can also follow the related blog for learn the basis of templating Link

    Firstly, We have to include the handlebar.js library in your file. like:


    Sub-templating means a main template contains another template, In the below screenshot, In which we used main-temp id for outer template and inside main template we used a reference variable named subTemplate. 

    Searching for an experienced
    Opencart Company ?
    Find out More



    And we design sub-template named as id=”sub-temp” separately inside the class container. Now we will create script for both the html design.


    At the top we include the handlebar.js after that create an object array for sub template named as row. Now get the first template html and complied the html using Handlebars.compile(main_temp).

    After this we will map the sub template inside the main template, firstly  get the sub template html as we got in above screenshot:

    var sub_demo = $(“#sub-temp”).html();

    Map the sub-template with reference variable inside the main template like:

    Handlebars.registerPartial(“subTemplate”, sub_demo);


    can be directly as:

    Handlebars.registerPartial(“subTemplate”, $(“#sub-temp”).html());

    Now replace the object data with the define handlebar variable like:

    var html = template(heading);

    And append the whole html to container class like:


    When you will run this html file out put will look like below screenshot:



    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home