如何使用 HandlebarJS 加载多个模板答案

【问题标题】：How to load multiple templates with HandlebarJS如何使用 HandlebarJS 加载多个模板
【发布时间】：2017-05-29 22:10:21
【问题描述】：

我目前正在构建一个小型 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();
    }
);

我的问题是。有没有一种方法可以加载所有这些模板，而不必为每个模板调用每个函数？

【问题讨论】：

标签： javascript jquery templates handlebars.js

【解决方案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();
});

【讨论】：