この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Ractive.js
Ractive.jsは、インタラクティブなDOM操作を行うためのライブラリです。 データバインディングやDOM更新を簡単に行うことができます。 最近のJavascriptフレームワークを使えば、そういったことはだいたいできますが、 Ractive.jsはとても軽量かつ覚えることも少ないので、すぐに使い始めることができます。 今回はここでやっているように、Ractive.jsを動かしてみましょう。
環境構築方法
今回使用した動作環境は以下のとおりです。
- OS : MacOS X 10.7.5
セットアップ&動作確認
セットアップはとても簡単です。 ここからRactive.jsをダウンロードします。 そしてサンプル用index.htmlを作成し、次のように記述しましょう。
<!doctype html>
<html lang='ja'>
<head>
<meta charset='utf-8'>
<title>ractive sample</title>
</head>
<body>
<div id='container'>
</div>
<script id='myTemplate' type='text/ractive'>
<label>your name: <input value='{{name}}'></label>
<p>Hello, {{name}}!</p>
</script>
<script src='Ractive.js'></script>
<script>
var ractive = new Ractive({
el: '#container',
template: '#myTemplate'
});
</script>
</body>
</html>上記サンプルでは、テキストフィールドに入力された文字列を、そのままテキスト表示しています。 Ractiveオブジェクト作成時に渡しているelには、出力先ブロックを、templateには出力内容を表すテンプレートを渡しています。 これだけの記述で、フィールドとテキストをバインディングすることができます。
もう一つサンプルを見てみます。下記例では、ボタンを押すとテンプレート内容のrecipientプロパティが更新されます。
<!doctype html>
<html lang='ja'>
<head>
<meta charset='utf-8'>
<title>ractive sample</title>
</head>
<body>
<div id='container'>
</div>
<script id='myTemplate' type='text/ractive'>
<p>{{greeting}}, {{recipient}}!</p>
<input id='btn' type='button' value="click" /> </br>
</script>
<script src='Ractive.js'></script>
<script>
var ractive = new Ractive({
el: '#container',
template: '#myTemplate',
data: { greeting: 'Hello', recipient: 'world'}
});
document.getElementById( 'btn' ).addEventListener( 'click', function () {
ractive.set( 'recipient', 'taro' );
});
</script>
</body>
</html>ここでは、ボタンクリックのタイミングでractive.set関数を使って、recipientプロパティを更新しています。
まとめ
今回はとりあえずRactive.jsを動かしてみました。データバインディングとDOM操作が簡単にできましたね。 ここのチュートリアルを順番に見ていけば、Ractive.jsの機能をひと通り確認することができます。 いくつか機能がありますが、それぞれはシンプルなのですぐに理解できると思います。
186
