ember.js how to render outlet inside each

Question

I'm trying to do the following:

I have a list inside a table

<table>
{{#each controller}}
  <tr> 
    <td>
      {{#linkTo person this}}{{name}}{{/linkTo}}
    </td>
  </tr>
{{/each}}
</table>

and i would like to render the details of an item just after the item itself. in this way:

<table>
{{#each controller}}
  <tr> 
    <td>
      {{#linkTo person this}}{{name}}{{/linkTo}}
    </td>
  </tr>
  <tr>
    {{outlet}}
  </tr>
{{/each}}
</table>

Unfortunately it does not work. Ember wants the outlet to be placed outside the each. Can i do something? maybe a context change? or the only thing i can do is a dom manipulation? (that's not the best!!)

thank you

I think you are trying to use outlet in a way that it is not supposed to be used. Are you sure you don't want to use a partial? — Fred Jiles
Yes i'm sure, because i want it to be a different route. However.. if it's not possible... i will not do it ;). Thank you — Alive Developer
I see your use case. It would make sense to be able to do something like you want. You might be able to use name outlets and get the intended behaviour. But that seems a bit like a hack. — Fred Jiles
you're right... however i think that it's too early to ask ember to have a lot of functionalities out of the box. After all it's still RC — Alive Developer

Mike Grassotti Mike Grassotti · Accepted Answer · 2013-04-30T20:27:25

You can't use the {{outlet}} helper inside of an {{each}} loop. Some alternatives:

//Basic view helper
{{view App.Item}}

<!-- Block view helper -->
{{#view App.Item}}
   <!-- template here -->
{{/view}}

<!-- just the template -->
{{template item}}

<!-- same as template but with leading _underscore -->
{{partial item}}

ember.js how to render outlet inside each

1 Answers