Emberjs Модалы по маршруту

Question

Итак, я пытаюсь выяснить, как лучше всего поставить модалы на маршрут, чтобы вы могли перейти к ним через URL-адрес.

application.hbs 

{{outlet}} 

{{outlet modal}} 

Существует дискуссия here и emberjs поваренной предоставляет другой example но ничего не покрывает, как вы можете иметь модальности по конкретному маршруту.

Ближайшего, что я видел это Stack Overflow question, но она страдает от двух проблем:

1. Когда посещаются маршрут модального, вид в главном выходе разрушается. Таким образом, в вашем пользовательском интерфейсе вещи, находящиеся под модальным стиранием, стираются.
2. history.back() заключается в том, что вы по существу пересматриваете этот маршрут, вызывая пересмотр этого вида и чувствуете себя очень хаки.

Это где я чувствую, решение будет существовать, но не уверен, что именно:

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

Вот как мы справиться с этим:

В пути вы использовать рендер кусок, похожий на то, что вы описали:

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

убирая выход на «дезактивировать» крюк, является важным шагом.

Для основного шаблона все, что вам нужно:

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

Это не отменяет выход по умолчанию.

Одна вещь, которую вы можете сделать для всех модальностей является реализация макета:

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

Другой Гоча является то, что там должно быть родителем маршрута оказывается в основной розетке. Если все, что находится в этой розетке, не является родителем вашего модального, тогда действие перехода от этого маршрута удалит его из розетки.

working JS bin

Answer 2

У вас есть несколько вариантов здесь:

• сделать модальный маршрут ребенок маршрута вы хотите упорствовать - чем либо оказывать модальную вложенные в шаблоне приложения, как в примере вы упомянули, или положить его в свой собственный шаблон id="myModal"

• добавить модальную розетка внутри сохранялась выходом маршрута и сделать его в renderTemplate методы

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

Кроме того, вы можете сделать шаблон с модальным в имени выхода любой момент (на действия фе), просто вызывая render метод с соответствующими аргументами