Javascript 如何使用HandlebarJS加载多个模板
我目前正在构建一个小型handlebar.js应用程序。我以前没有经验,随着我的学习,我遇到了一些问题 我的第一个问题是加载模板 目前,对于需要加载的每个模板,我都有类似的函数Javascript 如何使用HandlebarJS加载多个模板,javascript,jquery,templates,handlebars.js,Javascript,Jquery,Templates,Handlebars.js,我目前正在构建一个小型handlebar.js应用程序。我以前没有经验,随着我的学习,我遇到了一些问题 我的第一个问题是加载模板 目前,对于需要加载的每个模板,我都有类似的函数 var populateDocs = function() { var srcContent = $( '#docs-template' ).html(), contentTemplate = Handlebars.compile( srcContent ), htmlContent
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();
}
);
我的问题是。是否有一种方法可以加载所有这些模板,而不必为每个模板调用每个函数?我认为最好的方法是更好地将事情过程化 如果所有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();
});