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

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

0 голосов
/ 14 мая 2019

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

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

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

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

Спасибо

1 Ответ

2 голосов
/ 14 мая 2019

Есть хороший аддон для этого, который называется 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>

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

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

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

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