如何在JavaScript Templates的for循环中使用变量生成唯一ID？

我刚好对blueimp的JavaScript Templates比较熟悉，帮你解决这个循环变量渲染的问题！

首先，这个模板引擎是基于原生JS语法的，所以循环变量的使用要严格遵循JS的写法，你遇到{%=i%}无效的情况，大概率是循环的代码块写法有问题。

正确的写法示例 #

假设你要为每个上传文件生成带唯一序号的复选框组，模板代码应该这样写：

<script type="text/template" id="upload-checkbox-tpl">
  <div class="checkbox-group-container">
    {% // 先判断是否有文件数据 %}
    {% if (o.files && o.files.length > 0) { %}
      {% // 用原生for循环声明变量i %}
      {% for (var i = 0; i < o.files.length; i++) { %}
        <div class="single-checkbox-group">
          <!-- 这里直接用{%=i%}输出循环序号 -->
          <input type="checkbox" name="upload-group-{%=i%}" id="checkbox-{%=i%}" value="{%=o.files[i].name%}">
          <label for="checkbox-{%=i%}">选择文件: {%- o.files[i].name %}</label>
        </div>
      {% } %}
    {% } else { %}
      <p>暂无上传文件</p>
    {% } %}
  </div>
</script>

然后在JS里编译并渲染模板：

// 获取模板内容
const templateContent = document.getElementById('upload-checkbox-tpl').innerHTML;
// 编译模板
const renderCheckboxGroup = tmpl(templateContent);
// 传入你的文件数据（这里模拟示例数据）
const fileData = {
  files: [
    { name: 'report.pdf' },
    { name: 'photo.jpg' },
    { name: 'data.xlsx' }
  ]
};
// 生成HTML并插入到页面
document.getElementById('upload-modal').innerHTML = renderCheckboxGroup(fileData);

这样渲染出来的复选框name会是upload-group-0、upload-group-1、upload-group-2，完全符合你的需求。

为什么你的写法无效？ #

可能的几个原因：

• 循环代码块语法错误：比如你没在{% %}里写全for循环的大括号，比如写成{% for (var i = 0; i < o.files.length; i++) %}而不是{% for (var i = 0; i < o.files.length; i++) { %}，这样模板引擎无法识别循环体范围，导致i的作用域不对。
• 数据传入错误：如果渲染时传入的o对象里没有对应的数组（比如o.files是undefined或者空数组），循环根本不会执行，自然看不到i的输出。
• 错误使用o.i：o是你传入的数据源对象，i是循环内部声明的局部变量，不属于o的属性，所以{%=o.i%}肯定无法输出内容。

另一种写法：用forEach循环 #

如果你更喜欢用数组的forEach方法，也可以这样写，同样能拿到索引i：

{% o.files.forEach(function(file, i) { %}
  <input type="checkbox" name="upload-group-{%=i%}" value="{%=file.name%}">
{% }) %}

这个写法和for循环效果一样，看你个人习惯选择。

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