mercredi 20 mai 2015

Ember Modal on a route accessible from anywhere

I'm building an app that has a user settings panel that pops up in a modal dialog. The panel should be accessible from any page in the app. I'm trying to figure out the best way to build this in Ember.

I would like to build it in such a way that when the app redirects to the "/settings" route, the modal dialog appears with the current route in the background as you would expect. Then when the modal is closed the app redirects back to that route.

If the user goes directly to "/settings" from her browser then the modal will appear with a default page in the background.

Here is what I have so far:

export default Ember.Route.extend({

  defaultParentRoute: "project.index",

  beforeModel: function(transition){
    // get the name of the current route or if
    // user came directly to this url, use default route name
    var parent = this.get("defaultParentRoute");
    var application = this.controllerFor('application');
    if(application && application.get('currentRouteName')) {
      parent = application.get('currentRouteName');
    }
    this.set("parentRoute", parent);
  },

  renderTemplate: function(){
    // make sure the current route is still rendered in the main outlet
    this.render(this.get("parentRoute"));

    // render this route into the 'modal' outlet
    this.render({
      into: 'application',
      outlet: 'modal'
    });
  },  

  actions: {
    removeModal: function(page){ 
      // go back to the previous route     
      this.transitionTo(this.get("parentRoute"));
    }
  }

});

This works pretty well when navigating to the the route from a link in the app. However if a user goes straight to "myapp/settings" in her browser then the default page template gets rendered but without any data or it tries to use the 'model' data from my settings route.

How do I make sure the template underneath the modal gets rendered with the appropriate data?

Here's a JS Bin to demonstrate. Try clicking on 'settings' from any page in the app, then refresh the browser while the settings modal is open.




Aucun commentaire:

Enregistrer un commentaire