mardi 18 avril 2017

Ember Handlebars Generate Table

I am new to Ember/Handlebars and need to generate a navigation table with the form

<table>
    <tbody>
        <tr class="headerRow"><td>Group 1</td></tr>
        <tr><td>item1</td></tr>
        <tr><td>item2</td></tr>
    </tbody>
    <tbody>
        <tr class="headerRow"><td>Group 2</td></tr>
        <tr><td>item1</td></tr>
        <tr><td>item2</td></tr>
    </tbody>
</table>

This will allow me to have groups that can be dynamically expanded/contracted when the headerRow is clicked on.

Sample JSON data looks like

[{groupName: 'Group 1', item: 'item1'},{groupName: 'Group 1', item: 'item2'},{groupName: 'Group 2', item: 'item1'},{groupName: 'Group 2', item: 'item2'}]

I need to iterate through the data and create the tbody groups if the current groupName is different than the last group name. This is a trivial task in Javascript/jQuery to create the html as a string and add open and close tbody and header rows, but how do I do this in Handlebars. I cannot find a way to store the last group in a variable (so I can compare to the current group) while using the Handlebars formatting.

I have accomplished the task of generating the table via a JS string by using a helper function, but I need to attach component actions to the rows in the table. What is the correct way to do this in Ember? I'm using Ember CLI 2.9.1.




Aucun commentaire:

Enregistrer un commentaire