ember-document-title sandbox

components.ui-modal.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'div',
  classNames: ['ui', 'modal'],
  show: function() {
    var _this = this;
    console.log("ui-modal inserted into DOM");
    this.$()
      .modal({
        onHidden: function() {
          console.log("ui-modal is hidden");
          _this.sendAction('close');
        }
      })
      .modal('show');
  }.on('didInsertElement'),
  actions: {
    ok: function() {
      this.sendAction('ok');
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    modalTest: function() {
      this.send('openModal', 'test-modal', {});
    },
  }
});

helpers.title.js

import Ember from 'ember';

const get = Ember.get;
const { guidFor } = Ember;

function updateTitle(tokens) {
  document.title = tokens.toString();
}

export default Ember.Helper.extend({
  documentTitleList: Ember.inject.service(),

  init() {
    this._super();
    let tokens = get(this, 'documentTitleList');
    tokens.push({ id: guidFor(this) });
  },

  compute(params, hash) {
    let tokens = get(this, 'documentTitleList');
    hash.id = guidFor(this);
    hash.title = params.join('');
    tokens.push(hash);
    Ember.run.scheduleOnce('afterRender', null, updateTitle, tokens);
    return '';
  },

  destroy() {
    let tokens = get(this, 'documentTitleList');
    let id = guidFor(this);
    tokens.remove(id);
    Ember.run.scheduleOnce('afterRender', null, updateTitle, tokens);
  }
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  actions: {
    openModal: function(modalName, model) {
      console.log("Opening modal " + modalName);
      return this.render(modalName, {
        into: 'application',
        outlet: 'modal',
        model: model
      });
    },
    closeModal: function() {
      console.log("disconnecting modal");
      return this.disconnectOutlet({
        outlet: 'modal',
        parentView: 'application'
      });
    }
  }
});

templates.application.hbs

{{outlet 'modal'}}
<button {{action 'modalTest'}}>Open modal</button>

templates.components.ui-modal.hbs

<i class="close icon"></i>
<div class="header">
    {{title}}
</div>
<div class="content">
  {{yield}}
</div>
<div class="actions">
  <button class="ui button">
    {{cancel-text}}
  </button>
  <button class="ui primary button {{if okDisabled 'disabled'}}" {{action 'ok'}}>
    {{ok-text}}
  </button>
</div>

templates.test-modal.hbs

{{#ui-modal ok='save' ok-text="Test save" close='close' cancel-text="Cancel" title='Test modal' okDisabled=false model=model}}
Test modal

{{/ui-modal}}

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",
    "semantic-ui":
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.3/semantic.min.js"
  }
}