mercredi 24 mai 2017

Handlebars lookup helper to build dynamic tables

I would like to build a dynamic table using handlebars. I think I have to use lookup helper to achieve my wanted result. I am having some trouble using the lookup helper and the documentation is rather poor.

An example of my object looks like this:

{
headers:[
  0:"name",
  1:"brand",
  2:"type",
  3:"rating",
  4:"edited"
]
tableContent:[
  0:{
     contentName:{
        name:"Fanta",
        brand:"Coca-Cola Company",
        type:"Soda",
        rating:"3",
        edited:"2017-05-24"}
    }
]
}

Handlebars template:

<script id="itemTemplate" type="text/x-handlebars-template">
  <table id="table" class="bordered highlight centered">
    <thead>
      <tr>
        
        <th></th>
        
      </tr>
    </thead>
    <tbody>
      <tr>
        
        
        <td></td>
        
        
      </tr>
    </tbody>
  </table>
</script>

The reason I can't simply do <td> contentName.name </td> and so on, is that the user can create their own columns in the database, so I would have no way of knowing the property names beforehand.




Aucun commentaire:

Enregistrer un commentaire