How to reference {{outlet}} in Ember.CollectionView's itemView

Question

I am new to ember and ran into a problem and could not find an answer online.

I have a collectionView

App.MyView = Ember.CollectionView.extend({
    itemViewClass: 'App.MyViewItem',
    contentBinding: 'controller'
});

and the itemViewClass

App.MyViewItem = Ember.View.extend({
    templateName: 'mytemplate'
});

the template looks like that:

<div {{action 'select' view.content}}>{{view.content.name}}</div>
        {{outlet detail}}
</div>

This produces the content list just fine.

In the controller, I have an action:

select: function(evt){
            this.transitionToRoute('item', evt);
        }

What I want to do is to transition to a nested route when selecting the item (which works fine) and also load more data of the selected item into {{outlet detail}}. While I can load the content of the "item" route into an outlet of e.g. application.hbs, I don't know how to reference the outlet of the selected collectionView item so that the detailed contents are displayed within the existing view.

I tried to use:

this.render('item', {
            outlet: 'detail',
            into: '????'
        });

within the item Route, but I don't know how to reference the collectionview item template.

Maybe there's also a much easier way of loading more data from an item in the item's view (while changing the route at the same time). Any help would be appreciated.

score 0 · Answer 1 · answered Oct 19 '13 at 03:22

0

Why don't you just transitionTo 'item.details', remove the named outlet, change it to outlet, and add a route under your resource.

Then Ember does the heavy lifting of deciding what to render and where. Named outlets seems a little complicated (if it works at all) for a component that may not exist.

As a side note, did you try just excluding the into parameter, or saying into: 'mytemplate'?

answered Oct 19 '13 at 03:22

Kingpin2k

47,277
10
78
96

Hi, thanks for your answer, and yes, I tried excluding the parameter, but that did not work. I need an extra route but just want to load more content into the existing elements. I better understood what I need, though: I need an outlet in an each loop, see my comment to the other answer ... – ceed Oct 21 '13 at 10:04

score 0 · Accepted Answer · answered Oct 19 '13 at 03:49

What you really want to be doing here is not using an Ember.CollectionView, but have a resource in your router for MyItems, then have two routes: App.MyItemsIndexRoute and App.MyItemsRoute.

Here is a gist that shows how the router, routes, controllers, and templates could be set up:

https://gist.github.com/anonymous/7051432

For the example in the gist, our "items" are projects.

Ember templates are very powerful and you rarely need to use views. See ember guides on views.

Views in Ember.js are typically only created for the following reasons:

When you need sophisticated handling of user events When you want to create a re-usable component

Hi, I followed your example and thereby better understood the problem: In your example, you also have the outlet outside the loop, I need one inside the loop. Thanks to your example, I found this: http://stackoverflow.com/questions/13925233/ember-js-how-do-i-target-outlets-in-nested-repeated-views-and-what-are-the-b — ceed, Oct 21 '13 at 10:19

How to reference {{outlet}} in Ember.CollectionView's itemView

2 Answers2