Question

I just stumbled over emberJS and thought it would be worth trying it out for my next web application.

What I actually plan to do is showing a list of objects in a 2-dimensional way (atm this can be a table).

What I have so far:

<script type="text/x-handlebars">
<table width="100%" style="text-align:left">
  <tr>
    <th>
    </th>
    {{#each App.MyController.getColumnValues}}
      <th>{{this}}</th>
    {{/each}}
  </tr>
  {{#each App.MyController.getRowValues}}
    <tr>
      <th>{{this}}</th>
      {{#each App.MyController.getColumnValues}}
        {{view App.CountView rowBinding="this" columnBinding="../this"}}
      {{/each}}
    </tr>
  {{/each}}
</table>
</script>

and for the countView:

<script type="text/x-handlebars" data-template-name="countView">
  <td>{{view.row}} - {{view.column}}</td>
</script>

As you may see, I want a table having in each cell the value of the current column AND row.
Everything works, except of the columnBinding. As I read on Handlebars’ page {{../this}} is the way to address a parent template scope. In the two curly braces (without creating an extra view for it, this works pretty fine.
But I later need to call a function passing it the column and row value and thought (to make it lucid) a view would be nice at this point.

Any ideas how to access the parent template scope and pass it to the countView?

Answer 1

In order to avoid confusion you can always use variables in {{each}} block as in this case, you might try this way:

{{#each row in App.MyController.getRowValues}}
  <tr>
    <th>{{row}}</th>
    {{#each column in App.MyController.getColumnValues}}
      {{view App.CountView rowBinding="row" columnBinding="column"}}
    {{/each}}
  </tr>
{{/each}}

Let me know if this helps…