Aurelia.io中的組成：創建報告構建器

>本文探討了Aurelia的視覺組成，這是使用可重複使用的組件構建複雜UI的強大功能。 我們將構建一個展示此功能的報告構建器應用程序，而不是通常的瑣碎演示。 可以使用實時演示和源代碼（省略了鏈接）。

>

密鑰概念：

• 視覺組成： Aurelia允許通過組合較小的可重複使用的子視圖來構建複雜的視圖。這與傳統的基於路由的構圖不同。
>
• 元素：compose此自定義元素簡化了嵌入視圖模型對到父視圖，增強了模塊化和可重複性。 >
• eventAggregator：啟用無縫的組分交流而無需緊密耦合，促進工具箱和報告等元素之間的相互作用。 >
• 外部庫：>輕鬆整合庫，例如sortable.js，用於拖放功能，展示了aurelia的靈活性。 >
• >動畫： Aurelia的動畫庫和CSS動畫提供視覺反饋，增強用戶體驗。 通過將共享功能分離為軟件包，
插件系統：
• 支持可重複使用的自定義代碼和乾淨的代碼庫。

理解視覺組成：

本質上，視覺組成將較小的視圖結合到較大，更複雜的視圖中。 這在

均質

構圖（重複相同類型的重複項目）和>異質構圖（結合不同類型的視圖）之間有所不同。 傳統的路由通常會處理此問題，但是Aurelia通過>元素提供了更靈活的一流方法，從而促進了模塊化和可重複性。 compose

>視覺構圖類型

使用Aurelia's元素：

> compose元素簡化了嵌入視圖模型對（查看和視圖模型，通常稱為“頁面”）。 您使用

>屬性指定視圖模型的文件名。 數據可以使用

>屬性傳遞。 View-Model可以選擇定義接收此數據的方法，從而有可能返回異步操作的承諾。 此外，您可以使用compose>屬性指定替代視圖，並根據父視圖模型的屬性，甚至在Child View-Model（）中動態選擇視圖。 view-model> modelactivate項目設置：viewgetViewStrategy

報告構建器基於Aurelia Skeleton Navigation應用程序（省略GitHub鏈接）。 路由器被卸下；該應用使用由子視圖組成的單個複雜視圖。 安裝說明可在項目的讀數中提供。

報告視圖結構：

app.html>充當主要容器，組成toolbox>視圖。 report>顯示用於打印或清除報告的可用小部件和按鈕。 每個小部件（例如，toolbox.html，logo.html）都是一個獨立的組件。使用均質和異質組成，textblock.html視圖顯示添加到其中的小部件。 報告中的report.html函數查看模型處理刪除小部件。 removeWidget>

間組件通信：

>

有助於組件之間的鬆散耦合。 工具箱中的EventAggregator>按鈕發布了“ ClearReport”事件，該報告查看模型訂閱並用來清除其小部件。 clearReport

>外部庫和插件：

> sortable.js（通過JSPM安裝）處理拖放功能。 Aurelia Animator CSS（通過JSPM安裝）提供動畫。 插件系統允許創建可重複使用的自定義組件和功能。

>

動畫：

視圖中的>

>和

類，與CSS動畫相結合，在組成和刪除窗口小部件的過程中創建視覺反饋。 au-stagger au-animate

drag＆drop實現：

> sortable.js均在>>視圖模型中使用。

>查看模型中的

處理程序將新的小部件添加到報告中，處理文本blocks的文本輸入。 toolbox reportonAdd結論： report

aurelia的視覺組成，結合

>和插件系統，為構建複雜的模塊化UI提供了強大而靈活的方法。 報告構建器的示例有效地證明了這一點。 >

（因簡潔而省略了常見問題部分，因為它在上面的詳細說明的情況下是多餘的。

以上是Aurelia.io中的組成：創建報告構建器的詳細內容。更多資訊請關注PHP中文網其他相關文章！