Databases
StackOverflow2013
Postsdbo
POWhat's the right way to enter and exit modal states with Ember router v2?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat's the right way to enter and exit modal states with Ember router v2?
    primarykey
    data
    text
    <p>I can't figure out the correct way to handle modal states/views with the new Ember router. More generally, how do you handle states that you can enter and exit without affecting the "main" state (the URL)?</p> <p>For example, a "New Message" button that is <em>always</em> available regardless of the current leaf state. Clicking "New Message" should open the new message modal over the current view, without affecting the URL.</p> <p>Currently, I'm using an approach like this:</p> <p>Routes:</p> <pre><code>App.Router.map(function() { this.route('inbox'); this.route('archive'); }); App.IndexRoute = Em.Route.extend({ ... events: { newMessage: function() { this.render('new_message', { into: 'application', outlet: 'modalView' }); }, // Clicking 'Save' or 'Cancel' in the new message modal triggers this event to remove the view: hideModal: function() { // BAD - using private API this.router._lookupActiveView('application').disconnectOutlet('modalView'); } } }); App.InboxRoute = Em.Route.extend({ ... renderTemplate: function(controller, model) { // BAD - need to specify the application template, instead of using default implementation this.render('inbox', { into: 'application' }); } }); App.ArchiveRoute = ... // basically the same as InboxRoute </code></pre> <p>application.handlebars:</p> <pre><code>&lt;button {{action newMessage}}&gt;New Message&lt;/button&gt; {{outlet}} {{outlet modalView}} </code></pre> <p>I've obviously left out some code for brevity.</p> <p>This approach 'works' but has the two problems identified above:</p> <ol> <li>I'm using a private API to remove the modal view in the <code>hideModal</code> event handler.</li> <li>I need to specify the <code>application</code> template in all of my subroutes, because if I don't, the default implementation of <code>renderTemplate</code> will attempt to render into the modal's template instead of into application if you open the modal, close it, and then navigate between the inbox and archive states (because the modal's template has become the <code>lastRenderedTemplate</code> for the IndexRoute).</li> </ol> <p>Obviously, neither of these problems are dealbreakers but it would be nice to know if there is a better approach that I'm missing or if this is just a gap in the current router API.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USsly7_7
    1. USNick Ragaz
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhat's the right way to enter and exit modal states with Ember router v2?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POWhat's the right way to enter and exit modal states with Ember router v2?
      1. USJack Johnson
      1. VTFavorite
    3. VO
      singulars
      1. POWhat's the right way to enter and exit modal states with Ember router v2?
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload