Riotjs-tags
提供:Dev Guides
RIOT.JS-タグ
RIOTは、再利用可能なカスタムHTMLタグを作成することで機能します。 これらのタグはWebコンポーネントに似ており、ページおよびWebアプリ全体で再利用できます。 HTMLページにRIOTフレームワークを含めると、インポートされたjsはriotオブジェクトを指すriot変数を作成します。 このオブジェクトには、タグの作成やマウントなど、RIOT.jsと対話するために必要な関数が含まれています。
タグを作成して使用するには2つの方法があります。
- *インラインHTML *-riot.tag()関数を呼び出すことにより。 この関数は、タグを作成するためにタグ名とタグ定義を受け取ります。 タグ定義には、HTML、JavaScript、CSSなどを含めることができます。
- タグファイルの分離-タグ定義をタグファイルに保存します。 このタグファイルには、タグを作成するためのタグ定義が含まれています。 このファイルは、riot.tag()呼び出しの代わりにインポートする必要があります。
<script src = "/riotjs/src/messageTag.tag" type = "riot/tag"></script<
以下はインラインタグの例です。
例
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script>
var tagHtml = "<h1>Hello World!</h1>";
riot.tag("messageTag", tagHtml);
riot.mount("messageTag");
</script>
</body>
</html>
これにより、次の結果が生成されます–
以下は外部ファイルタグの例です。
例
messageTag.tag
<messageTag>
<h1>Hello World!</h1>
</messageTag>
索引
<!DOCTYPE html>
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>
<body>
<messageTag></messageTag>
<script src = "messageTag.tag" type = "riot/tag"></script>
<script>
riot.mount("messageTag");
</script>
</body>
</html>
これにより、次の結果が生成されます–