How To Use Sub Template In Handlebar.js

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. 

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);

OR

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:

$(‘.container’).append(html);

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

Thanks…