Context binding while using nested each blocks in Ember Handlebars

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?


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...

链接地址: http://www.djcxy.com/p/61586.html

上一篇: Ember.js把手块帮手

下一篇: 在Ember手柄中使用嵌套的每个块时的上下文绑定