Создание маршрута лайтбокса в Ember.js

Question

Моя система аутентификации использует лайтбоксы, так что, когда пользователь нажимает «Войти» или «Зарегистрироваться», для ввода их учетных данных появляется лайтбокс. Страница, на которой они были, по-прежнему отображается за лайтбокс, и когда они вошли в систему, лайтбокс исчезает, и представление возвращается к тому, как оно было. Я могу заставить это работать, когда я отклоняюсь от обычного потока маршрутов Ember, используя много JQuery, но я предпочел бы более тесно интегрировать это в остальное приложение Ember.

Проблема заключается в том, что обычное движение маршрута Ember предполагает, что просмотры и шаблоны обрабатываются определенным образом. В частности, такой маршрут, как /sign-in, будет отображать шаблон sign-in в шаблоне application, удаляя все, что было раньше. Поскольку я хочу сохранить представление, которое было раньше, этот подход не работает.

Есть ли способ показать представление Ember, чтобы не стереть текущий вид, а вместо этого сделать независимый просмотр, например, лайтбокс?

Answer 1

Вы можете использовать названные выходы и отображать шаблон в розетку, в моем шаблоне аппликатуры у меня есть выход, называемый модальным, и два действия в ApplicationRoute, openModal и closeModal. Открытый получает имя шаблона и использует рендеринг метода маршрута для установки выходного содержимого, а закрытие - пустой шаблон.

App.ApplicationRoute = Ember.Route.extend({ 
    actions: { 
     openModal: function(modal) { 
      this.render(modal, {into:'application', outlet: 'modal'}); 
     }, 
     closeModal: function() { 
      this.render('empty', {into: 'application', outlet: 'modal'}); 
     }, 
    } 
}); 

Html handelbars

<script type="text/x-handlebars" data-template-name="application"> 
{{! Other application template code}} 
<button {{action openModal 'hellow.modal'}}>Open it!</button> 
{{outlet modal}} 

</script> 
<script type="text/x-handlebars" data-template-name="empty"></script> 
<script type="text/x-handlebars" data-template-name="hellow/modal"> 
<div class="modal"> 
    <div class="modal-header"> 
     Hellow 
    </div> 
    <div class="modal-footer"> 
     <button {{action closeModal}}>Close</button> 
    </div> 
</div> 
</script> 

Это адаптировано из http://nerdyworm.com/blog/2013/04/20/ember-modal-example/