Wie man mehrere Vorlagen mit HandlebarJS lädt

Question

Ich baue gerade eine kleine Handlebars.js Anwendung. Ich habe keine vorherige Erfahrung und während ich lerne, während ich mitfahre, bin ich auf ein paar Probleme gestoßen.

Meine erste Ausgabe lädt Vorlagen.

Zur Zeit habe ich Funktionen wie dies für jede einzelne Vorlage I

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

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

Ich lese Vorlagen aus einer content.json Datei laden, müssen also, sobald diese Datei fertig ist, ich mehrere Funktionen aufrufen jede Vorlage füllen .

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

Meine Frage ist. Gibt es eine Möglichkeit, all diese Vorlagen zu laden, ohne jede Funktion für jede Vorlage aufrufen zu müssen?

Answer 1

Ich denke eher, dass das Beste, was Sie tun können, ist, Dinge besser zu prozedurieren.

Wenn alle populateXxx() Funktionen das gleiche Muster wie populateDocs() folgen (oder gemacht werden kann, dies zu tun), dann können Sie schreiben:

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

oder

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