将 aurelia-dialog 与 bootstrap、语义或其他 ui 工具包一起使用

Question

我正在使用语义 UI，它具有内置的模式功能 (see here)。与其编写所有代码来利用 Aurelia 中的这个特定功能，有没有办法挂钩到 aurelia-dialog 插件的渲染管道，以便我可以使用配置 aurelia-dialog 插件来使用语义 UI？

Answer 1

是的，有。

Aurelia-dialog 提供了一个抽象的 Renderer 接口，用于与渲染器交互。默认情况下，它将使用它提供的渲染器，但您可以通过配置对话框插件来覆盖它，如下所示：

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

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

...MyRenderer 使用 abstract Renderer interface。在您的渲染器中，您需要实现三个方法：getDialogContainer、showDialog 和 hideDialog。

一些注意事项 - 在您的 showDialog 函数中，您需要创建 showDialog 和 hideDialog 方法并将它们附加到作为参数传递的 dialogController 上。这确保您的 dialogController 可以以编程方式关闭对话框。

实现并注册渲染器后，对话框插件将使用您选择的 UI 工具包。希望这会有所帮助。

Answer 2

这是我的语义 UI 模式的解决方案（在 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');
    }
}

Dialog 类 (/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 类并将其添加到 attach() 钩子中：

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 )
});