CODEWITHSUNDEEP
jqueryjquery-pluginsjsrender
Michael Harvey
Michael Harvey

Reputation: 85

jsRender not rendering values

I've been at this for hours, and I still haven't figured this out. Any help is greatly appreciated.

I have this template

<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>

Method which gathers data and fills template:

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;
};

When I check the log, the template looks like

<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>

The stringified JSON looks like:

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

Notice there is nothing in the template where the values should be filled. Also, there's only one TR when there should be 2 in this example. I'm obviously doing something wrong, but I can't figure out what. My understanding of the {{for #data}} is that it will (in this example) create a TR for every object and fill in the values based on the keys. Is this not correct?

Upvotes: 0

Views: 561

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388326

2 Changes

Use {{for data}} for iteration ex

 <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>

No need to stringify the json data

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;
};

Upvotes: 1

Related Questions