title: Emberjs Modals on a route
body: <p>So I am trying to figure out how best to put modals on a route, such that you can navigate to them via the url.</p>
  
  <pre><code>application.hbs
  
  {{outlet}}
  
  {{outlet modal}}
  </code></pre>
  
  <p>There is a discussion <a href="http://discuss.emberjs.com/t/modal-views-can-we-agree-on-a-best-practice/707" rel="nofollow noreferrer">here</a> and emberjs cookbook provides another <a href="http://emberjs.com/guides/cookbook/user_interface_and_interaction/using_modal_dialogs/" rel="nofollow noreferrer">example</a> but nothing covers how you can have modals on a specific route.</p>
  
  <p>The closest thing I have seen is this <a href="https://stackoverflow.com/questions/15283388/ember-js-v1-0-0-rc-1-using-a-modal-outlet-how-do-i-route-out-of-the-modal-on/15284196#15284196">Stack Overflow question</a> but it suffers from two problems:</p>
  
  <ol>
  <li>When the modal route is visited, the view in the main outlet gets destroyed. So in your UI, things underneath the modal get wiped out.</li>
  <li>history.back() is that you essentially revisit that route causing that view to be redrawn and feels very hackish.</li>
  </ol>
  
  <p>This is where I feel a solution would exist but not sure what exactly:</p>
  
  <blockquote>
    <p>App.MyModalRoute = Ember.Route.extend({</p>
  
  <pre><code>renderTemplate: function(controller, model) {
  
    /**
     * When my modal route is visited, render it in the outlet
     * called 'modal' but somehow also persist the default outlet.
     **/
     this.render({ outlet: 'modal' });   
  } 
  </code></pre>
    
    <p>});</p>
  </blockquote>