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

示例

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

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

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

范例： youtube.html

<template bindable="videoId">
<iframe width="560" height="315" xx_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>