Creating a Lightbox Route in Ember.js

Question

My authentication system uses lightboxes, so that when a user clicks "Sign In" or "Sign Up", a lightbox pops up for them to input their credentials. The page they were on remains rendered behind the lightbox, and when they're done signing in, the lightbox disappears and the view returns to the way it was. I can get this to work when I deviate from the conventional Ember route flow by using a lot of Jquery, but I'd prefer to integrate this more tightly into the rest of my Ember app.

The problem is, the conventional Ember route flow expects views and templates to be handled in a particular way. Specifically, a route such as /sign-in will render the sign-in template within the application template, erasing whatever was there before. Since I want to preserve the view that was there before, this approach doesn't work.

Is there a way to tell an Ember view not to erase the current view, but instead to render an independent view such as a lightbox?

Edu Edu · Accepted Answer · 2013-10-07T13:39:18

You can use named outlets and render a template into the outlet, in my aplication template I has an outlet called modal, and two actions in the ApplicationRoute, openModal and closeModal. The open one receives a template name and uses the route method render to set the outlet content, the close one renders an empty template.

App.ApplicationRoute = Ember.Route.extend({
    actions: {
        openModal: function(modal) {
            this.render(modal, {into:'application', outlet: 'modal'});
        },
        closeModal: function() {
            this.render('empty', {into: 'application', outlet: 'modal'});
        },
    }
});

Html handelbars

<script type="text/x-handlebars" data-template-name="application">
{{! Other application template code}}
<button {{action openModal 'hellow.modal'}}>Open it!</button>
{{outlet modal}}

</script>
<script type="text/x-handlebars" data-template-name="empty"></script>
<script type="text/x-handlebars" data-template-name="hellow/modal">
<div class="modal">
    <div class="modal-header">
      Hellow
    </div>
    <div class="modal-footer">
      <button {{action closeModal}}>Close</button>
    </div>
</div>
</script>

This is adapted from http://nerdyworm.com/blog/2013/04/20/ember-modal-example/

Creating a Lightbox Route in Ember.js

1 Answers