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中文网其他相关文章！