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>

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

Riotjs-tags

RIOT.JS-タグ

例

例

messageTag.tag

索引

目次