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>
これにより、次の結果が生成されます-