使用帶引導程序，語義或其他ui工具包的aurelia對話框

Question

我正在使用semantic-ui，它有自己的內置模態功能（see here）。與其編寫所有代碼以在Aurelia中利用此特定功能，是否有辦法掛鉤aurelia-dialog插件的渲染管道，以便我可以使用配置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

這是我的解決方案（在TypeScript中）的語義UI模塊，它不使用aurelia對話框。

的視圖（/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到您的應用程序類，這增加了連接（）掛鉤：

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