今回は、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>
<script>riot.mount('sample');</script>
</body>
</html>
sample.tag
<sample>
<h2>{list}</h2>
<sample2></sample2>
<style scoped>
h2 {
color: #0D47A1;
}
</style>
<script>
this.list = "フォーム表示";
</script>
</sample>
<sample2>
<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>
</sample2>
index.htmlを実行すると下記のようにブラウザで表示されます。
親タグで子タグを読み込み：
<sample2></sample2>
親タグの中に子タグを記述することによりカスタムタグを入れ子にすることができます。その場合は親タグが読み込まれた時に子タグもマウントしなくても読み込まれることになります。
