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>