dayjournal | Riot.js #004

今回は、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>

    </head>
    <body>

        <sample></sample>
        <sample2 comment2 = "Riot.js sample2"></sample2>

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

    </body> 
</html>

sample.tag


<sample>

    <h1>{ comment }</h1>

    <style scoped>

        h1 {
            color: #00AA00;
        }

    </style>

    <script>

        this.comment= "Riot.js sample";

    </script>

</sample>

<sample2>

    <p>{ comment2 }</p>

    <style scoped>

        p {
            color: #0D47A1;
        }

    </style>

    <script>

        this.comment2= opts.comment2;

    </script>

</sample2>

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

変数「comment」の値をh1タグで表示：


<h1>{ comment }</h1>

this.comment= "Riot.js sample"

変数「comment2」の値を設定：


<sample2 comment2 = "Riot.js sample2"></sample2>

取得した変数「comment2」の値をpタグで表示：


<p>{ comment2 }</p>

this.comment2= opts.comment2

{}内にJSが記述できるので、変数を設定してhtml → tag内での値の代入をすることもできます。

dayjournal memo

Riot.js #004 – 値の代入

Yasunori Kirimoto 2017/1/16

index.html

sample.tag