riot-js_001_01


今回は、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を実行すると下記のようにブラウザで表示されます。任意の値を入力してみます。
riot-js_009_01


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


ボタンをクリックで名前付き要素取得:
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属性が利用できなくなっているので注意が必要です。





book


Q&A