riot-js_001_01


今回は、Riot.jsでカスタムタグを複数読み込む方法を紹介します。


カスタムタグを複数読み込むためには下記のように記述します。


index.html


<!DOCTYPE html>
<html lang="ja">
<head>

<meta charset="UTF-8">
<title>Riot.js sample</title>

<script src="./library/riot/riot+compiler.js"></script>

<script src="./tag/sample.tag" type="riot/tag"></script>
<script src="./tag/sample2.tag" type="riot/tag"></script>

</head>
<body>

<sample></sample>
<sample2></sample2>

<script>riot.mount('*');</script>

</body>
</html>


sample.tag


<sample>

<h1>h1タグ表示</h1>

<style scoped>

h1 {
color: #00AA00;
}

</style>

<script>

console.log('Riot.js Sample');

</script>

</sample>


sample2.tag


<sample2>

<h3>h3タグ表示2</h3>
<p>pタグ表示2</p>

<style scoped>

p {
color: #0D47A1;
}

</style>

<script>

console.log('Riot.js Sample2');

</script>

</sample2>


index.htmlを実行すると下記のようにブラウザで表示されます。

riot-js_003_01


tagファイルを複数読み込み:


<script src="./tag/sample2.tag" type="riot/tag"></script>


カスタムタグを指定:


<sample></sample>
<sample2></sample2>


カスタムタグをマウント:

*を記述することにより読み込んだtagファイルを全てマウントすることができます。


<script>riot.mount('*');</script>


tagファイルを複数読み込んでマウントすることができます。また、1つのtagファイル内に複数のカスタムタグを定義することもできます。





book


Q&A