Question

I do have a view which iterates over a collection of objects and prints simple prints the name of the resource together with an action:

{{#each resource in resources}}
  <li><a {{action showResource resource}}>{{resource.name}}</a></li>
{{/each}}

The resources is from a model which has the following structure:

{
   supported: ['a', 'b', 'c'],
   resources: [
      {
         id: 1,
         name: 'resource 1'
      }
   ]
}

My question is now, how can I get the property ‘supported’ in the showResource function? (The showResource function itself is defined in the Router and does a transition to a new route).

...
showResource: Ember.Route.transitionTo('resource'),
...
resource: Ember.Route.extend({
route: '/resources/:resourceId',
connectOutlets: function(router, context) {
    router.get('projectController').connectOutlet('resource', TL.Resource.loadResource(context['id']));
}

In the new view that gets rendered I do need now to have access to the supported properties of the previous model. So I intended to pass it in the connectOutlet in the manner of:

router.get('projectController')
      .connectOutlet('resource', {supported: ???, resource: TL.Resource.loadResource(context['id'])});

My question is how do I get access to the supported property?

Answer 1

One approach might be to combine the resources and the supported array into 1 object for the “context” in the loop.

var Resource = Ember.Object.extend({
    resource: null,
    supported: null
});

Then in your view/controller define:

combinedResources: function() {
    var combined = [];
    this.get('resources').forEach(function(resource) {
        combined.push(Resource.create({
            resource: resource,
            supported: supported
        }))
    });

    return combined;
}.property('resources', 'supported')

Now in the template

{{#each resource in combinedResources}}
    <li><a {{action showResource resource}}>{{resource.resource.name}}</a></li>
{{/each}}