Ractive.jsでHello world
最初はHello world的なやつからいきましょうー。公式のはコメントがやたら多いので、ここでは最小限で。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section id="container"></section>
<script id="mainTemplate" type="text/ractive">
<p>{{name}}さん、こんにちは！</p>
</script>
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<script type="text/javascript">
var r = new Ractive({
el : '#container',
template : '#mainTemplate',
data : {
name : "fkm"
}
});
</script>
</body>
</html>
必要な要素を１つ１つ見ていきましょう
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
CDNから最新のをとってきましょう。
<section id="container"></section>
テンプレートの内容を張り付ける部分を用意します。
<script id="mainTemplate" type="text/ractive">
<p>{{name}}さん、こんにちは！</p>
</script>
テンプレートの本体です。ポイントは2つ。
- idをつけておく
- typeはtext/ractive
var r = new Ractive({
el : '#container',
template : '#mainTemplate',
data : {
name : "fkm"
}
});
Ractiveオブジェクトを作ります。作った瞬間、elで指定した要素にtemplateで指定したテンプレートの内容を張り付けます。
dataは、テンプレート内の{{}}で使うためのデータを指定します。単なるオブジェクトでいいのが便利な点かも。