EmberJS - рендеринг отдельного маршрута как модального в конкретную розетку

EDIT. Несмотря на то, что это полностью верно (предпосылка рендеринга с использованием именованных выходов, представления теперь устарели в Ember 1.1. То же самое может быть достигнуто с помощью компонента

Да, вы можете сделать это:

Что вы хотели бы сделать, так это создать модальное окно в шаблоне и назначить ему именованный выход (или создать модальное представление с выходом):

in modal.hbs:

<div class='modal'>
    {{outlet "modalContent"}}
</div>

Затем я бы переопределил вашу базовую кнопку следующим образом:

App.BasicButton = Em.View.extend({
    context: null,
    template: Em.Handlebars.compile('<button>Click Me!</button>');
    click: function(evt) {
        this.get('controller').send('reroute', this.get('context'));
    }
});

И в вашем шаблоне настройте свою кнопку для запуска вашего модального окна:

in trigger.hbs

<!-- content and buttons for doing stuff -->
{{View App.BasicButton context='modalContent'}}

Наконец, вы хотите создать метод в своем маршруте, который обрабатывает рендеринг определенного контента в вашей розетке:

App.TriggerRoute = Em.Route.extend({
    actions: {
        reroute: function(route) {
            this.render(route, {into: 'modal', outlet: route});
        }
    }
});

Итак, по сути, вы визуализируете шаблон (называемый «modalContent») в определенный выход (называемый «modalContent»), размещенный в шаблоне/представлении (называемый «модальным»)

Вы также хотели бы написать некоторую логику, чтобы модальное окно открывалось при вставке элемента. Для этого я бы использовал действие didInsertElement в представлении modal:

App.ModalView = Em.View.extend({
    didInsertElement: function() {
        this.$.css("display", "block");
        //whatever other properties you need to set to get the modal to pop up
    }
});