ember.js - обновить форму в модальном и по своему маршруту?

В приложении 3.x Ember.js я хочу показать пользователю перегрузку формы обновления поверх существующего экрана.

Существующий экран будет находиться на маршруте « Vegetables», а форма обновления будет на « vegetable update carrots». Если бы обновление было обычной формой, проблем не было бы, но как мне отобразить форму, наложенную на существующую форму? Есть ли надстройка для этого?

Я использую bootstrap для стилизации пользовательского интерфейса, и поэтому доступны модальности bootstrap, но я не уверен, как это вписалось бы в шаблон?

Я видел несколько дополнений, но все они, похоже, нацелены на модальное появление в текущем маршруте, и по причинам аутентификации / авторизации я хочу отдельный маршрут для этой операции обновления.

Спасибо

Всего 1 ответ


Есть хороший аддон для этого ember-routable-modal

В своем маршруте вы расширяете их миксин:

// app/routes/example.js
import Ember from 'ember'
import ModalRouteMixin from 'ember-routable-modal/mixins/route'

export default Ember.Route.extend(ModalRouteMixin, {
});

А затем используйте специальную разметку:

// app/templates/example.hbs
<div class="routable-modal--dialog">
    <div class="routable-modal--content">
        <div class="routable-modal--header">
            {{routable-modal-close-button class="routable-modal--close"}}
            <h4 class="routable-modal--title">Modal title</h4>
        </div>
        <div class="routable-modal--body">
            Content
        </div>
    </div>
</div>

Теперь всякий раз, когда вы переходите к / example, через обычный помощник {{link-to}} или вызывая this.transitionTo () внутри маршрута, примерный модал будет отображаться поверх вашего текущего активного маршрута. Если вы загрузите страницу непосредственно из URL-адреса / example, ближайший родительский маршрут будет отображен под модальным.

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

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

renderTemplate() {
    this.render({
        into: 'application',
        outlet: 'routable-modal-outlet'
    });
}

Есть идеи?

10000