HTML 仅具有可绑定参数的自定义元素

在下文中，我们将创建一个 Aurelia 自定义元素的示例，该元素允许你通过视频 ID 显示 Youtube 视频。

Aurelia Custom Element 可以用两种不同的方式定义：第一种是通过创建视图模型和附带视图，第二种是通过创建基本 HTML 文件并在视图本身的 <template> 标签上使用 bindable 属性。

对于下面的示例，仅使用 HTML 的自定义元素是有意义的，因为我们只是在我们的应用程序中轻松使用 Youtube 嵌入代码。

示例： youtube.html

<template bindable="videoId">
<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allowfullscreen></iframe>
</template>

仅 HTML 自定义元素的文件名将用作 HTML 中的标记名称。因此，请确保你不要将其称为 header.html，footer.html 或任何其他本地 HTML 元素名称之类的通用名称。

使用它：

<template>
    <require from="./youtube.html"></require>

    <youtube video-id="C9GTEsNf_GU"></youtube>
</template>