ブートストラップ、セマンティック、または他のuiキットでaurelia-dialogを使用

Question

私は、独自のモーダル機能（see here）を持っているsemantic-uiを使用しています。 Aureliaでこの特定の機能を活用するコードをすべて書くのではなく、aurelia-dialogプラグインのレンダリングパイプラインにフックする方法があるので、aurelia-dialogプラグインを使用してsemantic-uiを使用できますか？

Answer 1

はい、あります。

Aurelia-dialogには抽象的なRendererインタフェースがあり、レンダラとのインタフェースに使用します。デフォルトでは、それが提供してレンダラを使用しますが、あなたはそうのように、ダイアログのプラグインを設定することによって、これをオーバーライドすることができます：MyRendererはabstract Renderer interface使用

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

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

を...。レンダラでは、getDialogContainer,showDialog、およびhideDialogの3つのメソッドを実装する必要があります。

showDialog関数では、showDialogとhideDialogのメソッドを作成し、それらを引数として渡されるdialogControllerにアタッチする必要があります。これにより、dialogControllerがプログラムでダイアログを閉じることができます。

レンダラーを実装して登録したら、ダイアログプラグインは選択したUIツールキットを使用します。お役に立てれば。

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を注入し、添付（）フックにこれを追加します。

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にこれを追加します。

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

：

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

使い方は、あなたが最初の引数としてすべてのモデルビュー/ビューペアの名前を付けることができます