扩展html aurelia.io方法-js教程-PHP中文网

钥匙要点

创建弹出

> aurelia.io中的自定义属性是什么，我如何使用它们？ IO是将自定义行为添加到现有HTML元素中的一种方法。它们以类似于自定义元素的方式定义，其中属性逻辑的类和其HTML表示的视图。定义后，可以将自定义属性添加到aurelia.io应用程序中的任何HTML元素，扩展其功能而无需创建一个全新的元素。

aurelia.io支持双向数据绑定，这意味着模型的变化自动更新视图，反之亦然。这是通过Aurelia.io的可观察性系统来实现的，该系统跟踪数据的变化并更新视图的相关部分。这使得创建动态的，交互式应用程序变得容易，在其中UI始终反映了数据的当前状态。

> aurelia.io？

首页

web前端

js教程

扩展html aurelia.io方法

William Shakespeare

Feb 20, 2025 am 11:05 AM

扩展html aurelia.io方法

钥匙要点

>教老狗HTML新技巧是当今现代JavaScript框架的主要重点。无论是遵循诸如WebComponents之类的潜在标准，创建自定义指令还是扩展现有类，您的选择框架很可能会提供一种扩展HTML标记本身的方法。在上一篇由布拉德·巴罗（Brad Barrow）撰写的文章中，您被介绍给了一个新玩家：Aurelia。本文将基于Brad的文章和代码，并向您展示如何通过遵循Aurelia的惯例来创建自定义元素以及自定义属性。
>本文的完整代码可以在我们的github repo上找到，您可以在此处看到我们要在此构建的内容（请花一些时间以使应用程序初始化）。

> 在直接跳入操作之前，让我们首先了解创建新组件的潜在用例。为此，我们将以概念性查看介绍性示例，如下图所示。我们有两页，以ViewModel（VM）为代表，并显示了有趣的图片和GIF视频。每个都有一个重复的列表，该列表本身呈现包含图像和文本块的帖子。

通过查看视图，我们可以看到数据采集以及渲染与一个VM/视图对紧密耦合。

>这可能不是一个简单的示例，但随着系统的增长和越来越多的要求，可能会变成主要缺点。

使用自定义属性增强现有元素

想象一下，我们得到了为每个有趣的页面帖子提供弹出窗口的请求。为此，我们可以通过放置必要的数据属性，然后在我们的Funnyvm内部进行初始化，从而轻松地将Bootstrap的功能直接连接到标记中。但是，如果我们也需要在另一页上突然进行操作怎么办？通过声明自定义属性来提供功能可以使我们的生活更加轻松。这些在以下方案中特别有用：

>包装现有插件
>用于常见绑定的快捷方式，例如样式或类
更改现有的HTML元素 /自定义元素，而无需直接代码访问

>现在让我们弄脏双手，看看构建我们的第一个自定义属性所需的内容。

创建弹出

>让我们从头开始看看我们要实现的目标。新属性弹出案应接受弹出窗口的位置，标题和内容的参数。放置位于右侧，因此一个简单的字符串，因为值就足够了。对于其他两个属性，我们将使用Aurelia的数据绑定来映射迭代值。为了加载文件，我们使用Aurelia的需求功能。来自属性包含要导入资源的相对路径。

<span><span><span><template</span>></span>
</span>  <span><span><span><ul</span> class<span>="list-group"</span>></span>
</span>    <span><span><span><li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></span>
</span>      <span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a</span> href<span>="http://reddit.com${p.data.permalink}"</span>></span>
</span>        ${p.data.title}
      <span><span><span></a</span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></template</span>></span></span>

登录后复制

为了实现这一目标，我们首先创建一个名为popover.js的src文件夹中的新JavaScript文件。与所有其他Aurelia结构一样，自定义属性是一个简单的导出ES6类，而不是传递到预定义API的功能集合（就像许多旧版框架一样）。

与其他框架相比，Aurelia通过通过元数据描述了构建体。但是，Aurelia不使用静态功能或复杂的API，而是利用了前沿ES7装饰器来实现这一目标。我们将从Aurelia-Framework包装中导入必要的装饰器。至于控件本身，我们将使用Twitter Bootstrap提供的弹出式JavaScript控件。因此，我们导入jQuery hander $和Bootstrap，以便初始化引导程序的JavaScript代码。

<span><span><span><require</span> from<span>="./popover"</span>></span><span><span></require</span>></span>    
</span>...
<span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /></span></span>

登录后复制

>下一步是应用前面提到的元数据，以便Aurelia知道加载文件时会得到什么。通过连接自定义装饰器，我们将组件命名为给定值。另一方面，可约束的装饰器正在宣布我们认为可以绑定的属性。我们只需为每个可用属性重复此装饰器即可。

>第一个注入装饰器会处理实际的DOM元素作为我们构造方法的参数，然后存储以供以后使用。

<span><span><span><template</span>></span>
</span>  <span><span><span><ul</span> class<span>="list-group"</span>></span>
</span>    <span><span><span><li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></span>
</span>      <span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a</span> href<span>="http://reddit.com${p.data.permalink}"</span>></span>
</span>        ${p.data.title}
      <span><span><span></a</span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></template</span>></span></span>

登录后复制

现在，我们拥有所有必要的信息，我们可以通过声明一种称为bind的方法来选择行为生命周期。这可以确保我们在适当的时机下初始化组件，与JQuery的Ready方法相当。

最后但并非最不重要的一点是，我们添加了更改的处理程序。请注意，在我们的示例中，这些实际上并未执行，因为绑定源不会随着时间的流逝而变化。

<span><span><span><require</span> from<span>="./popover"</span>></span><span><span></require</span>></span>    
</span>...
<span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /></span></span>

登录后复制

在github上查看完整的文件

<span>import <span>{customAttribute, bindable, inject}</span> from 'aurelia-framework';
</span><span>import $ from 'bootstrap';
</span><span>import bootstrap from 'bootstrap';
</span><span>...</span>

登录后复制

>现在我们已经看到了如何通过向现有元素提供属性来添加新功能，让我们继续并开始编写自己的自定义元素。

>创建具有自定义元素的新标签

为了创建全新的元素，Aurelia利用了一种非常相似的方法来定制属性。例如，我们将重新构建GIF页面的帖子，该帖子由称为Reddit-GIF的自定义元素表示，并提供了打开实际视频的可能性。我们认为的结果标记应该是：

>

您可以看到，我们使用了新标签，并通过数据绑定到数据属性提供必要的信息。>

>下一步是创建实际元素。我们通过在文件夹SRC中创建元素的视图Reddit-gif.html及其VM Reddit-gif.js来做到这一点。接下来看到的视图是利用gifs.html的先前标记，并添加一个按钮，该按钮可以切换用于嵌入实际视频的iframe。同样，Aurelia的观点包裹在模板标签中：

@<span>inject(Element)
</span>@<span>customAttribute('popover')
</span>@<span>bindable('title')
</span>@<span>bindable('content')
</span>@<span>bindable('placement')
</span><span>export class Popover {
</span><span>...</span>

登录后复制

>查看VM部分，我们确实遵循与创建自定义属性时相似的过程。但是这一次，我们利用了一个不同的装饰仪，该装饰器将告诉Aurelia我们将仅使用一个名为Data的属性来创建一个自定义元素。

。

<span>constructor(element) {
</span>  <span>this.element = element;
</span><span>}</span>

登录后复制

接下来，我们将定义一个gifactive成员，以跟踪是否应显示iframe。我们最初还将GIFSRC成员设置为空，以便在Iframe不可见的情况下不要预先加载任何内容。

<span>bind() {
</span>  <span>// initialize the popover
</span>  <span>$(this.element).popover({ 
</span>    <span>title: this.title,
</span>    <span>placement: this.placement,
</span>    <span>content: this.content,
</span>    <span>trigger: 'hover' });
</span><span>}</span>

登录后复制

最后但并非最不重要的一点是，我们添加了由切换按钮使用的toggleGif函数，该函数会在每个调用上翻转可见性和源。

<span>titleChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.title = newValue;
</span><span>}
</span>
<span>contentChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.content = newValue;
</span><span>}
</span>
<span>placementChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.placement = newValue;
</span><span>}</span>

登录后复制

>您可以在此处查看完整的HTML文件，并在此处查看JS文件

用约定的代码数量

降低代码量 Aurelia

<span><span><span><require</span> from<span>="./reddit-gif"</span>></span><span><span></require</span>></span>
</span>...
<span><span><span><ul</span> class<span>="list-group"</span>></span>
</span>    <span><span><span><li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></span>
</span>      <span><span><span><reddit-gif</span> data.bind<span>="p.data"</span>></span><span><span></reddit-gif</span>></span>
</span>    <span><span><span></li</span>></span>
</span><span><span><span></ul</span>></span></span>

登录后复制

就是要使开发人员的体验尽可能愉快。让我们面对事实：我们许多人不喜欢打字很多。因此，为了节省一些有价值的击键并随着时间的推移改善维护，Aurelia使用一组简单的约定。例如，可绑定的装饰器的完整版本实际上可能看起来像这样，我们仅通过提供属性名称就可以使用它。所有其他选项将自动推断。

<span><span><span><template</span>></span>
</span>  <span><span><span><ul</span> class<span>="list-group"</span>></span>
</span>    <span><span><span><li</span> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></span>
</span>      <span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a</span> href<span>="http://reddit.com${p.data.permalink}"</span>></span>
</span>        ${p.data.title}
      <span><span><span></a</span>></span>
</span>    <span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span><span><span><span></template</span>></span></span>

登录后复制

>要查看的另一件事是如何缩短对多个属性的使用。因此，我们还可以告诉我们的自定义属性可以期望动态属性。为此，我们使用Dynamicoptions Decorator装饰班级。现在，我们仍然可以重复使用相同的视图标记，但不必手动定义所有属性声明，顾名思义，这些声明在动态上下文中非常有帮助。这意味着我们可以编写一个名为dynamicpropertychanged的通用更换手，每当任何绑定属性更改时都会被调用。

<span><span><span><require</span> from<span>="./popover"</span>></span><span><span></require</span>></span>    
</span>...
<span><span><span><img</span> src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /></span></span>

登录后复制

但是自定义元素呢？好吧，我们已经暗中使用了一些惯例，甚至没有意识到。系统将自动将视图和VM对汇总在一起，而它们的名称相同。如果您需要使用其他视图，则可以使用Decorator @UseView（相对路径）。或者可能根本不使用视图来声明@noview。我们甚至可以发疯，让我们的观点通过添加装饰器Useshadowdom在阴影中呈现。如果您不熟悉该术语，请看一下这篇文章

结论

我们是Aurelia团队，希望您能为您提供如何通过利用自定义元素和属性来扩展HTML本身的快速概述。在整个示例中，我们希望您能够通过为您提供一种灵活而易于使用的框架来看到我们对开发人员体验的关注，而框架不会阻碍您阻碍或使您使用奇怪的API。如果您有任何疑问，我们想邀请您加入我们的Gitter频道。当您编写您的第一个自定义元素和属性时，我们也很想听听您的经历。

经常询问的问题（常见问题解答）有关使用Aurelia.io

扩展HTML

什么是aurelia.io，它如何扩展html？

aurelia.io是一个现代化的开源JavaScript框架，用于网络，移动设备和桌面开发。它通过允许开发人员创建自定义的HTML元素，将自定义属性添加到现有的HTML元素并控制HTML渲染的流程来扩展HTML。这是通过Aurelia功能强大的模板引擎来实现的，该引擎可以解释自定义元素和属性，并将其作为标准HTML。这允许在维护干净，可读的代码的同时提供更动态，交互式和复杂的Web应用程序。