Share Actions Outlet

components.some-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    renderPost() {
      this.sendAction('renderPost');
    },
    renderComment() {
      this.sendAction('renderComment');
    }
  }
});

components.user-comment.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    renderTopLevel: function () {
      this.sendAction('renderTopLevel');
    },
    renderPost: function () {
      this.sendAction('renderPost');
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  _fixtureModels: [
    { person: {name: 'bill'}, sideModel: null},
    { person: {name: 'bill'}, sideModel: { postName: 'test post' }},
    { person: {name: 'bill'}, sideModel: { commentName: 'test comment'}}
    ],
  
  _renderSideModel: function (template, sideModel) {
    this.render();
    
    this.render(template, {
      outlet: 'side-model',
      into: 'index',
      model: sideModel
    });
  },
                
  renderTemplate: function () {
    this.render();
   
   this.render('someComponentWrapper', {
     outlet: 'side-model',
     into: 'index'
   });
  },
  
  model: function () {
     return this._fixtureModels[0];
  },
    
  actions: {
    renderTopLevel: function () {
      return this.renderTemplate();
    },
    renderPost: function () {
      return this._renderSideModel('post', this._fixtureModels[1]);
    },
    renderComment: function () {
      return this._renderSideModel('comment', this._fixtureModels[2]);
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.some-component.hbs

<button {{action 'renderPost'}}>Render Post</button>

<button {{action 'renderComment'}}>Render Comment</button>

templates.components.user-comment.hbs

<p>Comment: {{comment.commentName}}</p>
<button {{action 'renderTopLevel' on='click'}}>Show Top Level</button>

templates.post.hbs

Some post.

templates.some-component-wrapper.hbs

{{some-component
   renderPost="renderPost"
   renderComment="renderComment"
}}

twiddle.json

{
  "version": "0.4.0",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.5/ember.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.5/ember-data.js"
  }
}