RIOT.JS-最初のアプリケーション

RIOTは、カスタムの再利用可能なhtmlタグを作成することで機能します。これらのタグはWebコンポーネントに似ており、ページやWebアプリ間で再利用できます。

RIOTを使用する手順

HTMLページにriot.jsをインポートします。

<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>

スクリプトセクションを開始し、タグコンテンツをhtmlとして定義します。スクリプトを含めることもできます。これについては、チュートリアルの後半で説明します。

var tagHtml = "<h1>Hello World!</h1>";

riot.tag（）メソッドを使用してタグを定義します。タグの名前、messageTag、およびタグの内容を含む変数を渡します。

riot.tag("messageTag", tagHtml);

riot.mount（）メソッドを使用してタグをマウントします。タグの名前messageTagを渡します。マウントプロセスは、htmlページに出現するすべてのメッセージタグをマウントします。MessageTagタグは、マウントする前にriot.jsを使用して定義する必要があります。

riot.mount("messageTag");
</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>

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