如何一次性加载多个Handlebars模板？寻求页面模板绑定高效写法

嘿，刚好之前折腾过类似的Handlebars批量绑定场景，给你分享几个高效的实现思路，帮你摆脱重复的模板绑定代码～

一、先搞定「一次性加载多个模板」的两种常用姿势 #

方式1：页面内聚合多模板（适合小型项目） #

把所有Handlebars模板统一放在页面的<script>标签里（每个模板加唯一ID），这样可以一次性抓取所有模板元素，批量编译：

<!-- 页面内的模板集合 -->
<script type="text/x-handlebars-template" id="tpl-user-card">
  <div class="user-card">
    <h3>{{username}}</h3>
    <p>邮箱：{{email}}</p>
  </div>
</script>

<script type="text/x-handlebars-template" id="tpl-post-list">
  {{#each posts}}
  <article class="post-item">
    <h2>{{title}}</h2>
    <p>{{excerpt}}</p>
  </article>
  {{/each}}
</script>

然后用JS批量处理：

// 抓取所有Handlebars模板元素
const templateEls = document.querySelectorAll('script[type="text/x-handlebars-template"]');
// 存储编译后的模板，用模板ID作为键（去掉前缀更简洁）
const compiledTpls = {};

templateEls.forEach(el => {
  // 提取模板标识，比如从tpl-user-card得到user-card
  const tplKey = el.id.replace('tpl-', '');
  compiledTpls[tplKey] = Handlebars.compile(el.innerHTML);
});

方式2：批量加载外部模板文件（适合中大型项目） #

如果模板是单独的.hbs文件，用Promise.all()一次性请求所有模板，批量编译后再使用：

// 定义模板路径映射：键是模板标识，值是文件路径
const tplPaths = {
  userCard: '/templates/user-card.hbs',
  postList: '/templates/post-list.hbs',
  commentSection: '/templates/comments.hbs'
};

// 批量请求并编译模板
Promise.all(
  Object.entries(tplPaths).map(([key, path]) => 
    fetch(path)
      .then(res => res.text())
      .then(tplText => ({ key, compiled: Handlebars.compile(tplText) }))
  )
).then(compiledList => {
  // 把编译后的模板转成对象，方便后续调用
  const compiledTpls = compiledList.reduce((acc, item) => {
    acc[item.key] = item.compiled;
    return acc;
  }, {});
  
  // 模板加载完成后，开始批量绑定到页面区块
  bindTplsToBlocks(compiledTpls);
});

二、用循环批量绑定模板到页面区块 #

核心思路是用一个配置数组维护「模板-区块-数据」的映射关系，然后遍历这个数组完成渲染，完全不用写重复的绑定代码：

第一步：定义映射配置数组 #

把所有需要绑定的关系都写在这个数组里，后续新增模板/区块只需要加新项：

// 配置数组：每个元素对应一组模板-区块-数据的绑定
const tplBlockMap = [
  {
    tplKey: 'userCard', // 对应compiledTpls里的模板标识
    targetSelector: '#user-profile', // 页面目标区块的选择器
    data: { username: 'jrutter', email: 'jrutter@example.com' } // 渲染用的数据
  },
  {
    tplKey: 'postList',
    targetSelector: '#post-container',
    data: { posts: [
      { title: 'Handlebars批量渲染技巧', excerpt: '效率提升N倍' },
      { title: '我的模板管理经验', excerpt: '告别重复代码' }
    ] }
  },
  {
    tplKey: 'commentSection',
    targetSelector: '#comments-area',
    data: { comments: ['干货满满！', '学到了～'] }
  }
];

第二步：编写循环绑定函数 #

遍历配置数组，完成模板渲染和插入：

function bindTplsToBlocks(compiledTpls) {
  tplBlockMap.forEach(item => {
    const { tplKey, targetSelector, data } = item;
    const template = compiledTpls[tplKey];
    
    // 做个简单的错误检查，避免找不到模板或区块导致报错
    if (!template) {
      console.warn(`模板${tplKey}未找到，跳过绑定`);
      return;
    }
    
    const targetEl = document.querySelector(targetSelector);
    if (!targetEl) {
      console.warn(`目标区块${targetSelector}未找到，跳过绑定`);
      return;
    }
    
    // 渲染模板并插入到目标区块
    targetEl.innerHTML = template(data);
  });
}

三、额外优化小技巧 #

• 模板缓存：编译后的模板存在全局对象里，避免重复编译，提升性能
• 异步数据适配：如果数据是异步获取的，可以把data改成返回Promise的函数，循环里用async/await处理：

  // 修改配置项，data变成异步函数
  const tplBlockMap = [
    {
      tplKey: 'userCard',
      targetSelector: '#user-profile',
      data: () => fetch('/api/user').then(res => res.json())
    }
  ];
  
  // 调整绑定函数为异步循环
  async function bindTplsToBlocks(compiledTpls) {
    for (const item of tplBlockMap) {
      const { tplKey, targetSelector, data } = item;
      const template = compiledTpls[tplKey];
      const targetEl = document.querySelector(targetSelector);
      
      if (!template || !targetEl) continue;
      
      // 先获取异步数据再渲染
      const renderData = await data();
      targetEl.innerHTML = template(renderData);
    }
  }
  

• 错误处理增强：实际项目里可以把警告换成更完善的错误日志上报，方便排查问题

这样一来，不管你有多少个模板和区块，只需要在配置数组里新增条目就行，完全不用写重复的绑定代码，维护起来超省心～

内容的提问来源于stack exchange，提问作者jrutter