jsRender 不渲染值

Question

我已经做了好几个小时了，但我仍然没有弄清楚这一点。非常感谢任何帮助。

我有这个模板

<script id="TwoLevelsDeepTbodyTemplate" type="text/x-jsrender">
    <tbody class="TwoLevelsDeep">
        {{for #data}}
        <tr class="ClassificationTwoLevelsDeep">
            <td colspan="2">┖&nbsp;<span class="Type">{{:title}}</span></td>
            <td class="CusClassificationInput">
                <span class="Editable hidden"><input type="text" value="{{:percentageOfBusiness}}" maxlength="3">%</span>
                <span class="CustomerTypeValue">
                  {{if percentageOfBusiness}}
                      {{:percentageOfBusiness}}
                  {{else}}
                      -
                  {{/if}}
                </span>
            </td>
        </tr>
        {{/for}}
    </tbody>
</script>

收集数据并填充模板的方法：

function getGrandChildrenTemplate(paryGrandChildren) {
    let jsonObj = [];
    $.each(paryGrandChildren, function (i, gc) {
        let item = {};
        item['title'] = gc.Text;
        item['percentageOfBusiness'] = gc.Data;
        jsonObj.push(item);
    });
    let data = JSON.stringify(jsonObj);
    let tmpl = $.templates('#TwoLevelsDeepTbodyTemplate');
    let html = tmpl.render(data);
    console.log(data);
    console.log(html);
    return html;
};

当我检查日志时，模板看起来像

<tbody class="TwoLevelsDeep">
    <tr class="BCClassificationTwoLevelsDeep">
        <td colspan="2">┖&nbsp;<span class="Type"></span></td>
        <td class="CusClassificationInput">
            <span class="Editable hidden"><input type="text" value="" maxlength="3">%</span>
            <span class="CustomerTypeValue">-</span>
        </td>
    </tr>
</tbody>

字符串化的 JSON 看起来像：

[{"title":"Single Family","percentageOfBusiness":""},{"title":"Multi-Family","percentageOfBusiness":""}]

请注意，模板中没有应填写值的内容。此外，在本例中应该有 2 个时，只有一个 TR。我显然做错了什么，但我不知道是什么。我对 {{for #data}} 的理解是它将（在此示例中）为每个对象创建一个 TR 并根据键填充值。这不正确吗？

Answer 1

2 变化

使用 {{for data}} 进行迭代 例如

 <script id="TwoLevelsDeepTbodyTemplate" type="text/x-jsrender">
  <tbody class="TwoLevelsDeep">
    {{for data}}
    <tr class="ClassificationTwoLevelsDeep">
      <td colspan="2">┖&nbsp;<span class="Type">{{:title}}</span></td>
      <td class="CusClassificationInput">
        <span class="Editable hidden"><input type="text" value="{{:percentageOfBusiness}}" maxlength="3">%</span>
        <span class="CustomerTypeValue">
                  {{if percentageOfBusiness}}
                      {{:percentageOfBusiness}}
                  {{else}}
                      -
                  {{/if}}
                </span>
      </td>
    </tr>
    {{/for}}
  </tbody>
</script>

无需对json数据进行字符串化

function getGrandChildrenTemplate(paryGrandChildren) {
  let jsonObj = [];
  $.each(paryGrandChildren, function(i, gc) {
    let item = {};
    item['title'] = gc.Text;
    item['percentageOfBusiness'] = gc.Data;
    jsonObj.push(item);
  });

  let tmpl = $.templates('#TwoLevelsDeepTbodyTemplate');
  let html = tmpl.render({
    data: jsonObj
  });
  console.log(html);
  return html;
};