Aurelia.ioの構成：レポートビルダーの作成

この記事では、再利用可能なコンポーネントを使用して複雑なUIを構築するための強力な機能であるAureliaの視覚構成について説明します。 通常の些細なデモの代わりに、この機能を紹介するレポートビルダーアプリケーションを構築します。 ライブデモとソースコードが利用可能です（簡潔にするためにリンクが省略されています）。

重要な概念：

視覚的な構成：
• Aureliaは、より小さく、再利用可能なサブビューを組み合わせて、複雑なビューを構築できます。これは、従来のルーティングベースの構成とは異なります
要素：
• このカスタム要素により、埋め込みビューモデルペアが親ビューに埋め込まれ、モジュール性と再利用性が向上します。 composeeventaggregator：
タイトなカップリングなしでシームレスなコンポーネント間通信を有効にし、ツールボックスやレポートなどの要素間の相互作用を促進します。
• 外部ライブラリ：ドラッグアンドドロップ機能のためにsortable.jsなどのライブラリを簡単に統合し、Aureliaの柔軟性を紹介します。
• アニメーション：AureliaのアニメーションライブラリとCSSアニメーションは、視覚的なフィードバックを提供し、ユーザーエクスペリエンスを向上させます。 プラグインシステム：
共有機能をパッケージに分離することにより、再利用可能なカスタムコードとクリーンコードベースをサポートします。
• 視覚的構成の理解：
• 視覚構成は、本質的に、より小さなビューをより大きく、より複雑なビューに組み合わせます。 これは、均質
組成（同じタイプの繰り返しアイテム）と

不均一

組成（異なるタイプのビューを組み合わせた）の間で異なります。 従来のルーティングはしばしばこれを処理しますが、Aureliaは要素を介してより柔軟でファーストクラスのアプローチを提供します。

視覚的な構成タイプ

aureliaの要素を使用：compose

要素は、ビューモデルペアの埋め込みを簡素化します（「ページ」と呼ばれることが多いビューとビューモデル）。 属性を使用して、View-Modelのファイル名を指定します。 データは、属性を使用して渡すことができます。 View-Modelは、オプションでこのデータを受信するための

メソッドを定義し、非同期操作の約束を返す可能性があります。 さらに、

属性を使用して代替ビューを指定し、親ビューモデルのプロパティに基づいてビューを動的に選択するか、子どもビューモデル（）内の関数を指定できます。 composeプロジェクトのセットアップ：

レポートビルダーは、Aurelia Skeleton Navigation App（GitHub Linkが省略）に基づいています。 ルーターが削除されます。このアプリは、サブビューで構成される単一の複雑なビューを使用します。 インストール手順は、プロジェクトのreadmeで入手できます

レポートビュー構造：

はメインコンテナとして機能し、ビューを構成します。 app.htmlレポートを印刷またはクリアするための利用可能なウィジェットとボタンを表示します。 各ウィジェット（例えば、toolbox、report）は、自己完結型コンポーネントです。 toolbox.htmlビューは、均質な組成と異種構成の両方を使用して、追加されたウィジェットを表示します。 レポートビューモデルの機能のlogo.html関数ウィジェットの削除を処理します。 textblock.htmlreport.htmlコンポーネント間通信：removeWidget

コンポーネント間のゆるい結合を促進します。 Toolboxのボタンは、「ClearReport」イベントを公開します。これは、レポートView-Modelがウィジェットをクリアするためにサブスクライブして使用するイベントです。

外部ライブラリとプラグイン：EventAggregatorclearReport

sortable.js（JSPM経由でインストール）ドラッグアンドドロップ機能を処理します。 Aurelia Animator CSS（JSPM経由でインストール）はアニメーションを提供します。 プラグインシステムでは、再利用可能なカスタムコンポーネントと機能を作成できます。

アニメーション：

ビューの

および

クラスは、CSSアニメーションと組み合わせて、構成とウィジェットの削除中に視覚的なフィードバックを作成します。 ドラッグアンドドロップ実装：

au-staggersortable.jsは、au-animateと

ビューモデルの両方で使用されます。

view-modelのハンドラーは、レポートに新しいウィジェットを追加し、テキストブロックのテキスト入力を処理します。

結論：

toolbox reportAureliaの視覚的構成とonAddおよびプラグインシステムと組み合わされて、複雑なモジュラーUIを構築するための強力で柔軟なアプローチを提供します。 レポートビルダーの例は、これを効果的に示しています report

（上記の詳細な説明を考えると、大部分が冗長であるため、頻繁に尋ねられる質問セクションは簡潔に省略されています。）

以上がAurelia.ioの構成：レポートビルダーの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。