Aurelia-プラグイン

アプリの作成を開始するときは、ほとんどの場合、いくつかの追加のプラグインを使用する必要があります。この章では、Aureliaフレームワークでプラグインを使用する方法を学習します。

標準プラグイン

前の章では、Aureliaフレームワークでデフォルト構成を使用する方法を見ました。デフォルト構成を使用している場合は、プラグインの標準セットが利用可能になります。

  • defaultBindingLanguage() −このプラグインは接続する簡単な方法を提供します view-modelview。一方向のデータバインディング構文はすでに見ました(${someValue})。他のバインディング言語を使用することもできますが、デフォルトのバインディング言語を使用することをお勧めします。

  • defaultResources() −デフォルトのリソースは、次のようないくつかの基本的な構成を提供します。 if, repeat, compose、など。これらの構成を自分で作成することもできますが、非常に一般的に使用されているため、Aureliaはすでにこのライブラリ内に作成しています。

  • Router()−ほとんどのアプリケーションは、ある種のルーティングを使用します。したがって、Router標準プラグインの一部です。ルーティングの詳細については、次の章で確認できます。

  • History() −履歴プラグインは通常、一緒に使用されます router

  • eventAggregator()−このプラグインは、コンポーネント間の通信に使用されます。アプリ内のメッセージまたはチャネルの公開とサブスクライブを処理します。

公式プラグイン

これらのプラグインはデフォルト構成の一部ではありませんが、頻繁に使用されます。

  • fetch()−フェッチプラグインはHTTPリクエストの処理に使用されます。必要に応じて、他のAJAXライブラリを使用できます。

  • animatorCSS() −このプラグインは、CSSアニメーションを処理する方法を提供します。

  • animator-velocity()− CSSアニメーションの代わりに、Velocityアニメーションライブラリを使用できます。これらのプラグインを使用すると、Aureliaアプリ内でVelocityを使用できます。

  • dialog() −ダイアログプラグインは、高度にカスタマイズ可能なモーダルウィンドウを提供します。

  • i18n() −これは内部化とローカリゼーションのためのプラグインです。

  • ui-virtualization() −仮想化は、パフォーマンスの高いUIタスクを処理するための便利なライブラリです。

  • validation() −データを検証する必要がある場合は、このプラグインを使用してください。

上記で説明したすべてのプラグインは、このチュートリアルの執筆時点でAureliaコアチームによって正式に保守されています。将来的には、他にも便利なプラグインがいくつか追加される予定です。次の例は、プラグインを使用するようにアプリを構成する方法を示しています。

プラグインのインストール

たとえば、使用したい場合 animator-css そして animator-velocity、最初にインストールする必要があります。

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-animator-css
C:\Users\username\Desktop\aureliaApp>jspm install aurelia-animator-velocity

前の章では、手動構成の使用方法を学びました。プラグインをに追加できますmain.js ファイル。

main.js

export function configure(aurelia) {
   aurelia.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator()
   .plugin('aurelia-animatorCSS')
   .plugin('aurelia-animator-velocity')

   aurelia.start().then(() => aurelia.setRoot());
}