CODEWITHSUNDEEP
htmlhandlebars.js
Deep Patel
Deep Patel

Reputation: 33

Using Handlebars {{each}} in a Table

I have looked on other questions on stack overflow on how to use the each helper in Handlebars in a HTML table but when I am doing it it is not properly reading the each function unless I put it inside the tag. I have seen online this is how it is done but it for some reason is not working for me. The data I am calling using is loading fine on the page because if I put the helper in the it works.

<div class="container" id="content">
        <template id="stemplate">
           <table>
              <tr>
                <th>Date</th>
                <th>Open</th>
              </tr>
              <tr class="tData">
                {{#each values}}
                  <td>{{date}}</td>
                  <td>{{open}}</td>
                {{/each}}
              </tr>   
            </table>
          </template>
      </div>
    </div>

Upvotes: 1

Views: 6504

Answers (1)

Fatih Erol
Fatih Erol

Reputation: 699

Example

Html

 <table id="stemplate">
        <thead>
            <tr>
                <th>Date</th>
                <th>Open</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

<script id="table-template" type="text/x-handlebars-template">
    {{#each this}}
    <tr>
        <td>{{date}}</td>
        <td>{{open}}</td>
    </tr>
    {{/each}}
</script>

Js

$(function() {

    var template = Handlebars.compile($("#table-template").html());
    var data = [{
        date: "01.01.2017",
        open: true
    }, {
        date: "01.01.2018",
        open: false
    }];

    $('#stemplate tbody').html(template(data));
});

Example Link

Upvotes: 2

Related Questions