dayjournal memo

Total 975 articles!!

riot-js

Riot.js #003 – カスタムタグを複数読み込む

Yasunori Kirimoto's avatar
Yasunori Kirimoto 2017/1/12

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