Используйте aurelia-диалог с загрузочным, семантическим или другим пользовательским интерфейсом

Question

Я использую semantic-ui, который имеет собственную встроенную модальную функциональность ( см. Здесь). Вместо написания всего кода для использования этой конкретной функциональности в Aurelia, есть ли способ подключиться к конвейеру рендеринга плагина aurelia-dialog, чтобы я мог использовать настройку плагина aurelia-dialog для использования semantic-ui?

Answer 1

Да, есть.

Aurelia-dialog предоставляет абстрактный интерфейс рендерера, который он использует для взаимодействия с рендерером. По умолчанию он будет использовать предоставляемый рендерер, но вы можете переопределить это, настроив плагин диалога, например так:

import {MyRenderer} from './my-renderer';

aurelia.use.plugin('aurelia-dialog', (config) => {
    config.useRenderer(MyRenderer);
});

...где MyRenderer использует абстрактный интерфейс Renderer. В вашем рендерере вам нужно реализовать три метода: getDialogContainer, showDialog, а также hideDialog,

Некоторые предостережения - в вашем showDialog функция, вам нужно будет создать showDialog а также hideDialog методы и прикрепить их к dialogController, который передается в качестве аргумента. Это гарантирует, что ваш dialogController может программно закрыть диалог.

После того, как вы внедрили и зарегистрировали свой рендерер, плагин диалога будет использовать выбранный вами набор инструментов пользовательского интерфейса. Надеюсь это поможет.

Answer 2

Это мое решение (в TypeScript) для модальных семантических интерфейсов, оно не использует aurelia-dialog.

Представление (/ui/dialogs/dialog-confirm.html):

<template>
    <div class="ui modal small" ref="dialogElement">
        <div class="header">${model.headerText}</div>
        <div class="content">
            <p>${model.messageText}</p>
        </div>
        <div class="actions">
            <div class="ui approve button">${model.confirmText?model.confirmText:'OK'}</div>
            <div class="ui cancel button">${model.cancelText?model.cancelText:'Cancel'}</div>
        </div>
    </div>
</template>

Модель представления (/ui/dialogs/dialog-confirm.ts):

export class Dialog {
    model;
    done;
    result;
    dialogElement:HTMLElement;
    activate(data) {
        if( data ){
            this.model = data.model;
            this.done = data.done;
            this.result = false;
        }
    }
    bind(){
        $(this.dialogElement)
            .modal({
                onApprove : ()=>{ this.result = true; },
                onDeny : ()=>{ this.result = false; },
                onHide : ()=>{ this.done(this.result); }
            })
            .modal('show');
    }
}

Класс диалога (/ui/dialogs/dialog.ts):

import { inject } from 'aurelia-framework';
import { EventAggregator } from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class Dialog {
    constructor(private eventAggregator) {
    }
    show(viewName: string, model) {
        return new Promise( (resolve, reject) => {
            this.eventAggregator.publish('showDialog', { 
                viewName: viewName,
                model: model,
                resolve: resolve
            });
        });
    }
}

... внедрите EventAggregator в ваш класс App и добавьте его в присоединенный хук ():

attached() {
    this.eventAggregator.subscribe('showDialog', (event) => {
        console.assert( !this.dialogData, "Only one dialog can be shown at any time." );
        event.done = (result) => {
            event.resolve(result);
            this.dialogData = null;
        }
        this.dialogName = event.viewName;
        this.dialogData = event;
    });
}

... наконец добавьте это в ваш app.html:

<compose if.bind="dialogData" view-model="./ui/dialogs/${dialogName}" model.bind="dialogData" view="./ui/dialogs/${dialogName}.html">
</compose>

В качестве первого аргумента вы можете указать имя любой пары модель-вид / вид:

this.dialog.show('dialog-confirm',{
    headerText:'Warning!',
    messageText:'When you delete stuff - it is lost',
    confirmText:'Delete',
    cancelText:'I better not...'
}).then( function(result){
    console.log( 'The result is: '+result )
});