扩展html aurelia.io方法

钥匙要点

现代JavaScript框架Aurelia.io，允许开发人员在HTML中创建自定义元素和属性，从而增强了Web应用程序的灵活性和功能。 Aurelia.io中的自定义属性可用于包装现有插件，提供常见绑定的快捷方式或更改现有的HTML元素，而无需直接代码访问。这使得在现有元素中添加新功能变得更加容易。
在Aurelia.io中创建新元素涉及为元素定义一个类，并为其HTML表示形式定义一个视图。这使创建具有自定义行为和结构的全新元素，改进代码重复使用和模块化设计。
• >教老狗HTML新技巧是当今现代JavaScript框架的主要重点。无论是遵循诸如WebComponents之类的潜在标准，创建自定义指令还是扩展现有类，您的选择框架很可能会提供一种扩展HTML标记本身的方法。在上一篇由布拉德·巴罗（Brad Barrow）撰写的文章中，您被介绍给了一个新玩家：Aurelia。本文将基于Brad的文章和代码，并向您展示如何通过遵循Aurelia的惯例来创建自定义元素以及自定义属性。
>
• >本文的完整代码可以在我们的github repo上找到，您可以在此处看到我们要在此构建的内容（请花一些时间以使应用程序初始化）。
为什么需要更多标记？

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

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

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

>

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

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

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

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

创建弹出

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

<span><span><span><template>></template></span>
</span>  <span><span><span><ul> class<span>="list-group"</span>></ul></span>
</span>    <span><span><span><li> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></li></span>
</span>      <span><span><span><img  alt="扩展html aurelia.io方法" > src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a> href<span>="http://reddit.com${p.data.permalink}"</span>></a></span>
</span>        ${p.data.title}
      <span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></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> from<span>="./popover"</span>></require></span><span><span></span>></span>    
</span>...
<span><span><span><img  alt="扩展html aurelia.io方法" > 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></span></span>

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

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

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

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

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

<span><span><span><require> from<span>="./popover"</span>></require></span><span><span></span>></span>    
</span>...
<span><span><span><img  alt="扩展html aurelia.io方法" > 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></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> from<span>="./reddit-gif"</span>></require></span><span><span></span>></span>
</span>...
<span><span><span><ul> class<span>="list-group"</span>></ul></span>
</span>    <span><span><span><li> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></li></span>
</span>      <span><span><span><reddit-gif> data.bind<span>="p.data"</span>></reddit-gif></span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span>

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

>

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

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

<span><span><span><require> from<span>="./popover"</span>></require></span><span><span></span>></span>    
</span>...
<span><span><span><img  alt="扩展html aurelia.io方法" > 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></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应用程序。

aurelia.io与其他JavaScript框架相比如何？

aurelia.io由于关注Web标准，简单性和可扩展性而在其他JavaScript框架中脱颖而出。与许多框架不同，Aurelia.io被设计为合作库的集合，这意味着您可以根据需要使用尽可能多或少的框架。它还强调了基于常规的编码，减少了所需的样板代码量。此外，Aurelia.io对遵循Web标准的承诺意味着您的代码将在未来和即将到来的Web Technologies中兼容。

>我如何在aurelia.io？

中创建自定义元素？ aurelia.io中的自定义元素涉及为元素定义一个类，以及其HTML表示的视图。该类包含该元素的逻辑，而视图定义了其HTML结构。定义后，可以像标准HTML元素一样在任何Aurelia.io应用程序中使用自定义元素。这允许代码重复使用和模块化设计，使您的应用程序更易于开发和维护。

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

>

> aurelia.io如何处理数据绑定？

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

>

>我可以将Aurelia.io与其他JavaScript库和框架一起使用吗？ .IO被设计为与其他JavaScript库和框架兼容。它使用模块化体系结构，这意味着您可以选择使用框架的哪些部分。这使得将Aurelia.io集成到现有项目中变得容易，或将其他库和框架与Aurelia.io。包括一个强大的路由器，允许复杂的导航方案。路由器支持嵌套路由，可选参数和动态路由等功能。这使得使用aurelia.io创建单页应用程序变得容易，在该应用程序中，用户可以在不同的视图之间导航而无需刷新页面。

> aurelia.io？

aurelia.io的学习曲线是什么，旨在易于学习，重点是简单性和惯例而不是配置。如果您熟悉JavaScript和HTML，则应该能够快速购买Aurelia.io。该框架的文档是全面的，包含大量示例可以帮助您入门。

> Aurelia.io如何测试？它的性能是什么样的？

aurelia.io。可靠性和性能。它结合了单元测试，集成测试和端到端测试，以涵盖框架的各个方面。在性能方面，Aurelia.io的设计为快速有效，具有最小的足迹和优化的渲染。

>

> aurelia.io有哪种支持和社区？ IO拥有一个充满活力的开发人员社区，他们为框架做出了贡献并相互支持。有许多可用的资源，包括社区论坛，吉特聊天室和堆栈溢出标签。此外，Aurelia.io团队还提供专业的支持和培训服务。

以上是扩展html aurelia.io方法的详细内容。更多信息请关注PHP中文网其他相关文章！