Question

我使用的是semantic-ui，它有自己的模态功能（see here）。不是编写所有代码来利用Aurelia中的这个特定功能，有没有办法挂钩aurelia-dialog插件的渲染管道，所以我可以使用configure aurelia-dialog插件来使用semantic-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 )
});

使用带有引导程序，语义或其他ui工具包的aurelia对话框

2 个答案: