modal popup with ember 1.0 rc6

Asked By: Anonymous

How do you create a modal popup with the latest version of ember.js? Every single example I’ve found uses connectOutlet, which was deprecated a while ago, and the fact that I’m new to ember doesnt help.

I already have a named outlet in my application template, but how do I render my modal popup view to this outlet from a controller event? or should I use a route event?

Solution

Answered By: Anonymous

Adam Hawkins just published an excellent post on this topic, you can find it here: http://hawkins.io/2013/06/ember-and-bootstrap-modals/

To summarize:

• Include {{outlet modal}} in application.hbs
• Render into the outlet from your router by using events
• Animation triggered by the view’s didInsertElement hook and on it’s close action
• Modal’s close action should target the view, which waits for animation to complete before sending close event to the router

From Adam’s jsfiddle:

App.ApplicationRoute = Ember.Route.extend({
  events: {
    open: function() {
      this.render('modal', { into: 'application', outlet: 'modal' });
    },

    close: function() {
      this.render('nothing', { into: 'application', outlet: 'modal' });
    },

    save: function() {
      alert('actions work like normal!');
    }
  }
});

App.ModalView = Ember.View.extend({  
  didInsertElement: function() {
    this.$('.modal, .modal-backdrop').addClass('in');
  },

  layoutName: 'modal_layout',

  close: function() {
    var view = this;
    // use one of: transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd
    // events so the handler is only fired once in your browser
    this.$('.modal').one("transitionend", function(ev) {
      view.controller.send('close');
    });

    this.$('.modal, .modal-backdrop').removeClass('in');
  }
});