RIOT.JS-タグ

RIOTは、カスタムの再利用可能なhtmlタグを作成することで機能します。これらのタグはWebコンポーネントに似ており、ページやWebアプリ間で再利用できます。HTMLページにRIOTフレームワークを含めると、インポートされたjsは、riotオブジェクトを指すriot変数を作成します。このオブジェクトには、タグの作成やマウントなど、RIOT.jsと対話するために必要な関数が含まれています。

タグを作成して使用するには、2つの方法があります。

Inline HTML− riot.tag（）関数を呼び出す。この関数は、タグ名とタグ定義を使用してタグを作成します。タグ定義には、HTML、JavaScript、CSSなどを含めることができます。
Seperate Tag file−タグ定義をタグファイルに保存する。このタグファイルには、タグを作成するためのタグ定義が含まれています。このファイルは、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>

index.htm

<!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>

これにより、次の結果が生成されます-