如何使用HandlebarJS加載多個模板

Question

我目前正在構建一個小的Handlebars.js應用程序。我沒有任何經驗，而且隨着學習的進展，我一直在遇到一些問題。

我的第一個問題是加載模板。

目前我有這樣的功能，爲每一個模板，我需要加載

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

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

我從content.json文件，所以一旦這個文件已經準備好，我調用多個函數來填充每個模板讀模板。

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

我的問題是。有沒有一種方法可以加載所有這些模板，而無需爲每個模板調用每個函數？

Answer 1

我寧願認爲你能做的最好的事情就是讓事情變得更好。

如果所有populateXxx()功能，遵循相同的模式populateDocs()（或者可以做這樣的），那麼你可以這樣寫：

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

或

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