Emberjs des Modaux sur une route

Question

Donc, je suis à essayer de comprendre la meilleure façon de mettre des modaux sur un itinéraire, de sorte que vous pouvez naviguer via l'url.

application.hbs

{{outlet}}

{{outlet modal}}

Il y a une discussion ici et emberjs livre de cuisine offre une autre exemple mais rien n'explique comment vous pouvez avoir des modaux sur un itinéraire spécifique.

La chose la plus proche que j'ai vu est-ce Un Débordement de pile question mais il souffre de deux problèmes:

1. Lorsque le modal de la route est visité, le point de vue dans le débouché principal est détruit.Donc, dans votre INTERFACE utilisateur, les choses sous le modal obtenir anéanti.
2. l'histoire.back (), c'est que vous essentiellement revenir la route causant, qui a été redessiné et se sent très à l'hackish.

C'est là que je me sens, une solution existe, mais pas sûr de ce que exactement:

App.MyModalRoute = Braise.L'itinéraire.extend({

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' });   
} 

});

Answer 1

Voici comment nous gérons-nous:

Dans la route, vous utilisez une pièce de rendu semblable à ce que vous avez décrit:

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

  actions: {
    closeModel: function() {
      this.transitionTo('users.index');
    }
  },
  deactivate: function() {
    this.render('empty', {
      into: 'application',
      outlet: 'modal'
    });
  }  
}

Effacement de sortie sur le crochet "désactivé" est une étape importante.

Pour le modèle principal Tout ce dont vous avez besoin est:

{{outlet}}
{{outlet "modal"}}

Ceci ne remplace pas la prise par défaut.

Une chose que vous voudrez peut-être faire pour que tous vos modaux soient implémenter une mise en page:

App.UserDeleteView = Ember.View.extend({
  layoutName: 'settings/modals/layout',
  templateName: 'settings/modals/user_delete'
});

Un autre gotcha est qu'il doit y avoir une voie mère rendue dans la prise principale.Si ce n'est que dans cette sortie n'est pas le parent de votre modal, l'acte d'éloigner de cette route le retirera de la prise.

travail JS bin

Answer 2

Vous avez plusieurs options:

• faire modal de la route de l'enfant de l'itinéraire que vous souhaitez persister que soit rendu modal imbriquée dans le modèle d'application, comme dans l'exemple que vous avez mentionné, ou de le mettre à l'intérieur de son propre modèle id="myModal"

• ajouter modal prise à l'intérieur persisté route de la sortie et de l'afficher dans renderTemplate méthode

  renderTemplate: function(controller, model) {
      this.render();   //render default template
  
      this.render('myModalTemplate', { //render modal to its own outlet
          outlet: 'modal', 
          into: 'myModal', //parent view name. Probably same as route name
          controller : controller
      });
  }
  

En outre, vous pouvez modèle de rendu avec modal nommé la sortie tout moment(sur l'action de f.e.), simplement en appelant render méthode avec les bons arguments