ポリマーアプリケーションのメッセージボックス

私は最初のより大きなポリマーアプリケーションに取り組んでおり、現在約30のコンポーネントがあります。ほとんどのコンポーネントは、メッセージボックスを表示（モーダル）できる必要があります。このために、（他のメッセージボックスコンポーネントと同様の）ペーパーダイアログをラップするメッセージボックスコンポーネントを実装しました。私は好きではない何ポリマーアプリケーションのメッセージボックス

は、メッセージボックスを表示したいすべてのコンポーネントで、私は要素に

<my-message-box id="message-box"></my-message-box>

を定義し、これは、しかし、働くこの

this.$["message-box"].information("Something happened...");

ようにそれを呼び出す必要があります私の直感は、メッセージボックスはグローバルサービス、シングルトンのようなものでなければならないということです。 C＃でf.e. MessageBoxクラスには静的メソッドが存在します。

上記のメカニズムは本当にそれを行うための推奨方法ですか、それともより良い解決策ですか？今、私ができる

ready() { 
    super.ready(); 
    this.addEventListener('o_error', e => this._errorListener(e)); 
} 

_errorListener(e) { 
    this.o_error = e.detail; 
    this.$.errorDlog.open(); 
}

：

<body> 
    <main-app></main-app> 
    <error-dialog></error-dialog> 
    <noscript> 
    Please enable JavaScript to view this website. 
    </noscript> 
</body>

error-dialogのready()方法は、カスタムイベントを追加します。

出典

2017-11-09 NicolasR

私の現在のアプローチはerror-dialogを作成し、私のmain-appindex.htmlにに兄弟として、それを追加することですerror-dialogどこからでも

let msg = ... 
const dlog = document.querySelector('error-dialog'); 
dlog.dispatchEvent(new CustomEvent('o_error', {detail: msg, bubbles: true, composed: true}));

出典

2017-11-10 02:44:28 Thad

これはすばらしい解決策のように見え、スタック化の問題を解決するものと思われます。https://github.com/PolymerElements/paper-dialog/issues/7 – NicolasR

ポリマーアプリケーションのメッセージボックス

答えて

関連する問題