EmberJS: multiple outlets within #each loop

Question

I want to accomplish the following feature:

A list of entries - when a single entry is clicked, the details of this entry should be displayed below the current entry.

It should be possible to access a single entry via a route, e.g. tasks/1

My approach:

I tried to solve this by including {{outlet}} within my #each loop but that did not quite work.

All tutorials an solutions I found are based on a List -> Details approach where only a single outlet is used.

I have no idea how I could solve this problem. Is there a better solution?

Answer 1

This is not possible through routing. You are better off using a component that expands, loads and displays the details upon clicking.

//list.hbs
{{#each task in tasks}}
  {{#task-loader task=task}}
    {{#task-loader-trigger}}
      //list ui
    {{/task-loader-trigger}}
    {{#task-loader-content}}
      //details ui
    {{/task-loader-content}}
  {{/task-loader}}
{{/each}}

//task-loader.js
export default Em.Component.extend({
  isOpen: false
});

//task-loader-trigger.js
export default Em.Component.extend({
  click: function() {
    //toggle isOpen
  }
}};

//task-loader-content.js
export default Em.Component.extend({
  classNameBindings: ['parentView.isOpen:show:hide'],
  didInsertElement: function() {
    //send request and load data
  } 
});

If you do want to maintain state (the currently open task), use query params. Hope this helps :)