Ractivejs: How to get to work Nested properties in view

Question

I have 2 objects results and headers being headers generated from _.keys(result[0])

r{
  data:{
    headers:['head1','head2']
    result:[
      {head1:'content1',head2:'content2'}
      {head1:'content3',head2:'content4'}
      {head1:'content5',head2:'content6'}
    ]
}

I have to create a table dinamically so I create this:

<table class="ui celled table segment">
  <thead>
    <tr>
    {{#headers}}
    <th>{{.}}</th>
    {{/headers}}
  </tr></thead>
  <tbody>
    {{#result:i}}
    <tr>
      {{#headers:h}}
        <td>{{????}}</td> <-- Here is where I fail to know what to put into
      {{/headers}}
    </tr>
    {{/result}}
  </tbody>
</table>

Can someone help me to fill in the blanks. So I can create a table that display the contents

If I remove the {{#headers}} part and I already know the elements <td>{{.head1}}</td> work perfectly the problem is that I'am generating different objects on the fly.

Answer 1

{{#result:i}}
  <tr>
    {{#headers:h}}
      <td>{{result[i][this]}}</td> 
    {{/headers}}
  </tr>
{{/result}}

The reason this works is that the <td> is repeated for each item in the headers array, because it's inside a headers section - so far, so obvious. Because of that, we can use this to refer to the current header (head1, head2 etc). The trick is to get a reference to the current row - and because you've already created the i index reference, we can do that easily with result[i]. Hence result[i][this].

Here's a demo fiddle: http://jsfiddle.net/rich_harris/dkQ5Z/