Dialog Bug

components.dialog-ui.js

import Ember from 'ember';

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

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    openDialog() {
      return this.render('dialog', {
		outlet: 'dialog',
        into: 'application',
        model: {
          title: 'Dialog Title',
          message: 'Dialog message.'
        },
      });
	},

	closeDialog(action) {
	  alert('User selected: ' + action);
      return this.disconnectOutlet({
      	outlet: 'dialog',
      	parentView: 'application',
      });
	},
  },
});

templates.application.hbs

<button {{action 'openDialog'}}>Open Dialog</button>
{{outlet}}
{{outlet 'dialog'}}

templates.components.dialog-ui.hbs

<div class="c-dialog">
  <h2>{{model.title}}</h2>
  <p>{{model.message}}</p>
  <button {{action 'close' 'no'}}>No</button>
  <button {{action 'close' 'yes'}}>Yes</button>
</div>

templates.dialog.hbs

{{dialog-ui model=model close='closeDialog'}}

twiddle.json

{
  "version": "0.9.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.6.0",
    "ember-data": "2.6.0",
    "ember-template-compiler": "2.6.0"
  }
}