dayjournal | Riot.js #009 – 名前付き要素を取得

今回は、Riot.jsで名前付き要素を取得する方法を紹介します。v2までは、id属性やname属性等を利用できましたが、v3からはそれらが廃止され、ref属性を利用する必要があります。

名前付き要素を取得するためには下記のように記述します。

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>

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

    </body> 
</html>

sample.tag


<sample>

    <form onsubmit={submit}>
        <input type="text" ref="username"/>
        <input type="password" ref="password"/>
        <button type="submit" ref="submit">Go</button>
    </form>

    <style scoped>

        input, button {
            font-size: 20px;
        }

    </style>

    <script>

        this.submit = function() {

            console.log('username: ', this.refs.username.value);
            console.log('password: ', this.refs.password.value);

        }.bind(this);

    </script>

</sample>

index.htmlを実行すると下記のようにブラウザで表示されます。任意の値を入力してみます。

ボタンをクリックすると、コンソールに入力した値が表示されます。

ボタンをクリックで名前付き要素取得： ref → refsで値を取得


<sample>

    <form onsubmit={submit}>
        <input type="text" ref="username"/>
        <input type="password" ref="password"/>
        <button type="submit" ref="submit">Go</button>
    </form>

    <script>

        this.submit = function() {

            console.log('username: ', this.refs.username.value);
            console.log('password: ', this.refs.password.value);

        }.bind(this);

    </script>

</sample>

名前付き要素を取得することができます。v3ではid属性やname属性が利用できなくなっているので注意が必要です。

dayjournal memo

Riot.js #009 – 名前付き要素を取得

Yasunori Kirimoto 2017/1/28

index.html

sample.tag