使用JSRender循环渲染表单字段失败，寻求技术解决方案

看起来你在使用JSRender渲染表单字段时遇到了循环不生效的问题，我来帮你梳理下问题所在并给出解决方案：

问题根源分析 #

1. {{for}}语法误用：你传入的fields本身就是一个数组，JSRender的render方法在接收数组时，会自动遍历数组并重复渲染整个模板内容。但你在模板里又嵌套了{{for}}，这会尝试去遍历当前数据对象的子数组（而你的每个字段对象并没有子数组），所以这个内部循环根本不会触发。
2. 模板输出语法错误：你的模板里写的{{>name}}是HTML转义后的写法，实际在JSRender模板中，应该直接用{{>name}}来输出数据字段。
3. render方法参数错误：你调用render(fields, true)时的第二个参数true是无效的，JSRender的render方法第二个参数是配置选项对象，完全不需要传这个布尔值。

解决方案 #

我给你两种可行的修改方式，你可以根据自己的需求选择：

方式一：直接利用数组自动遍历（去掉模板中的{{for}}）

修改你的模板，移除多余的{{for}}标签，因为传入的数组会自动触发模板的循环渲染：

<script id="UpdateTemplate" type="text/x-jsrender">
<form id="EditForm">
  <table width="100%" border="0">
    <tr>
      <td>
        <div class="form-group">
          <label for="{{>name}}">{{>label}}</label>
          <input type="{{>type}}" class="form-control" id="{{>name}}" name="{{>name}}">
        </div>
      </td>
    </tr>
  </table>
</form>
</script>

然后修改JS调用代码，去掉无效的第二个参数：

$("#test").html($("#UpdateTemplate").render(fields));

方式二：包装数据对象，使用{{for}}显式遍历

如果你需要在模板中保留{{for}}（比如模板还有其他非循环内容），可以把数组包装成一个包含fields属性的对象，这样就能用{{for fields}}来显式遍历：

修改JS调用代码：

$("#test").html($("#UpdateTemplate").render({ fields: fields }));

对应的模板修改为：

<script id="UpdateTemplate" type="text/x-jsrender">
<form id="EditForm">
  <table width="100%" border="0">
    {{for fields}}
    <tr>
      <td>
        <div class="form-group">
          <label for="{{>name}}">{{>label}}</label>
          <input type="{{>type}}" class="form-control" id="{{>name}}" name="{{>name}}">
        </div>
      </td>
    </tr>
    {{/for}}
  </table>
</form>
</script>

额外建议 #

记得给input标签加上name="{{>name}}"属性，这样表单提交时才能正确对应到每个字段的名称，获取到输入的值。

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