Emberjs Modales en una ruta

Question

Así que estoy tratando de descubrir la mejor manera de poner modales en una ruta, de modo que puedas navegar hasta ellos a través de la URL.

application.hbs

{{outlet}}

{{outlet modal}}

Hay una discusión aquí y el libro de cocina de emberjs proporciona otro ejemplo pero nada cubre cómo puedes tener modales en una ruta específica.

Lo más parecido que he visto es esto. Pregunta de desbordamiento de pila pero sufre de dos problemas:

1. Cuando se visita la ruta modal, la vista en la salida principal se destruye.Entonces, en su interfaz de usuario, las cosas debajo del modal se eliminan.
2. History.back() es que esencialmente vuelves a visitar esa ruta, lo que hace que esa vista se vuelva a dibujar y se siente muy pirateada.

Aquí es donde creo que existiría una solución, pero no estoy seguro de cuál es exactamente:

App.MyModalRoute = Ember.Route.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

Aquí es cómo lo manejamos:

En la ruta, use una pieza de renderización similar a lo que describió:

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

La eliminación de salida en el gancho "desactivado" es un paso importante.

Para la plantilla principal, todo lo que necesita es:

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

Esto no anula la toma de corriente predeterminada.

Una cosa que puede querer hacer por todos sus modales es implementar un diseño:

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

Otro gotcha es que debe haber una ruta principal que se prestara en la salida principal.Si lo que sea, en esa salida no es el padre de su modal, entonces el acto de alejarse de esa ruta lo eliminará de la salida.

trabajando js bin

Answer 2

Tienes varias opciones aquí:

• haga que la ruta modal sea hija de la ruta que desea conservar, en lugar de representar el modal anidado en la plantilla de la aplicación, como en el ejemplo que mencionó, o colocarlo dentro de su propia plantilla id="myModal"

• agregue una salida modal dentro de la salida de la ruta persistente y renderícela en renderTemplate método

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

Además, puedes renderizar la plantilla con modal en la salida con nombre en cualquier momento (en acción, por ejemplo), simplemente llamando render método con argumentos adecuados