How to use {{render}} with an ArrayController

Design
1

As a first-time ember user, my reading tells me that for a navigation menu seen throughout the app, {{render “navigation”}} would be correct. I have created a NavigationController extending ArrayController and having a itemController for the individual elements (when I get this working I’ll switch to lookupItemController() as the items are heterogeneous.

Does this seem right (plausibly so)?

I am having trouble accessing the navigation items together with their controller in the template. It would seem like {{each}} ... {{/each}} as shown in the ArrayController doc doesn’t work. I can loop using {{each controllers.content}}. However in this case, the context in the loop is still the ArrayController, not the itemController.

Perhaps I am violating some idiom – have I just made a small mistake somewhere (see ember.js - ember render w/ ArrayController - Stack Overflow) or should I consider a different design? (e.g. not using {{render}}) … and why?

Thanks!

2

I ran into a similar problem, and I ended up just setting the itemController on the each itself—not sure if that’s the best way to do it or not, but it works:

{{#each model itemController='myController'}}do something{{/each}}

However, that doesn’t necessarily fix the issue if you want to have different itemControllers based on the item itself.

3

Thanks Kyle. In the meantime, I’ve created a view for the subitem and put the support code there, which is a bit strange, but works for the moment. Following your suggestion, could I do something like(?):

{{#each model itemController=lookupItemController#}}...{{/each}}

I’m also wondering if this is a bug or a “feature”? Perhaps there is some reason that {{render}} shouldn’t respect itemController / lookupItemController?

4

I believe you want to just do {{#each}}{{this}}{{/each}}

See: Ember Latest - JSFiddle - Code Playground

If I’m misunderstanding you question please let me know.

1 Like
5

Thanks for the simple example, Jason. In fact the problem is when I use the {{render}} helper. I have modified your example to demonstrate.

Note that, inside {{render}} lookupItemController behaves oddly. (My apologies if I overlooked something.)

UPDATE: Indeed I did overlook something. I was passing this to as the 2nd argument to render, and it was broken. I just updated the jsfiddle to use this.content:

And now it works! … My original situation was a bit more murky – perhaps I was doing something similar…