CODEWITHSUNDEEP
javascriptjquerytemplateshandlebars.js
Charlie
Charlie

Reputation: 276

How to load multiple templates with HandlebarJS

I am currently building a small Handlebars.js application. I have no prior experience and as I'm learning as I'm going along, I've been running in to a few issues.

My first issue is loading templates.

Currently I have functions like this for every single template I need to load

var populateDocs = function() {
   var srcContent = $( '#docs-template' ).html(),
        contentTemplate = Handlebars.compile( srcContent ),
        htmlContent = contentTemplate( content.getItem( 'docs' ) );

        $( '#docs' ).append( htmlContent );
};

I am reading templates from a content.json file so once this file is ready, I call multiple functions to populate each template.

content.onReady(
    function() {
        populateFooter();
        populateHomework();
        populateDocs();
        populateContact();
        generateTabs();
    }
);

My question is. Is there a way I can load all these templates without having to call each function for each template?

Upvotes: 0

Views: 120

Answers (1)

Roamer-1888
Roamer-1888

Reputation: 19288

I rather think the best you can do is to proceduralise things better.

If all the populateXxx() functions follow the same pattern as populateDocs() (or can be made to do so), then you can write :

var populate = function(id) {
    $('#'+id).append(Handlebars.compile($('#'+id+'-template').html())(content.getItem(id)));
};

content.onReady(function() {
    populate('footer');
    populate('homework');
    populate('docs');
    populate('contact');
    generateTabs();
});

or 

content.onReady(function() {
    ['footer', 'homework', 'docs', 'contact'].forEach(populate);
    generateTabs();
});

Upvotes: 1

Related Questions