Aurelia 插件
当您开始构建应用程序时,大多数情况下您会想要使用一些额外的插件。在本章中,您将学习如何在 Aurelia 框架中使用插件。
标准插件
在上一章中,我们看到了如何在 Aurelia 框架中使用默认配置。如果您使用默认配置,则可以使用标准插件集。
defaultBindingLanguage()-此插件提供了一种将 view-model 与 view 连接起来的简单方法。您已经看到了单向数据绑定语法 (${someValue})。尽管您可以使用其他一些绑定语言,但建议使用默认绑定语言。
defaultResources()-默认资源为我们提供了一些原始结构,例如 if、repeat、compose 等。您甚至可以自己构建这些结构,但由于它们是如此常用,Aurelia 已经在这个库中创建了它。
Router()-大多数应用程序使用某种路由。因此,Router 是标准插件的一部分。您可以在后续章节中查看有关路由的更多信息。
History()-历史插件通常与路由器一起使用。
eventAggregator()-此插件用于跨组件通信。它负责发布和订阅应用内的消息或频道。
官方插件
这些插件不是默认配置的一部分,但经常使用。
fetch()-Fetch 插件用于处理 HTTP 请求。如果需要,您可以使用其他一些 AJAX 库。
animatorCSS()-此插件提供了一种处理 CSS 动画的方法。
animator-velocity()-您可以使用 Velocity 动画库代替 CSS 动画。这些插件使我们能够在 Aurelia 应用中使用 Velocity。
dialog()-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());
}