最近Reactが盛り上がっています。特に大きな要因として、UIの描画を気にせず、Virtual DOM側に実際の描画は任せられるというのが挙げられます。
Virtual DOMの方式ではありませんが、hifiveでもデータを変更すると描画が変わる、データバインドという機能が提供されています。今回はそんなデータバインドの使い方をステップを踏みつつ紹介します。
基本のHTML
今回はJavaScript/スタイルシートともにダウンロードせず、CDN版を使います。一緒に使うjQueryもGoogleのCDN版を使います。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<link href="//code.htmlhifive.com/h5.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="//code.htmlhifive.com/h5.js"></script>
<title>TODO管理</title>
</head>
<body>
<div id="container">
</div>
</body>
</html>
モデルを作る
データバインドを行う際にはまず、モデルを定義する必要があります。最も簡単な例としては次のようになります。
var manager = h5.core.data.createManager('TodoManager');
var model = manager.createModel({
name: 'TodoModel',
schema: {
id: {id: true},
text: {
type: 'string'
}
}
});
モデル名とスキーマは必須です。また、ユニークなキーを設定する必要があります（今回はidです）。そして他のフィールドについても型を指定します。
オブジェクトを作る
定義したモデルに従ってオブジェクトを作ります。
var item = model.create({
id: '1',
text: 'Hello World'
});
そしてこれをビューにバインドします。
h5.core.view.bind($('#container'), item);
このようにバインドすると、
<div id="container">
<span data-h5-bind="text"></span>
</div>
といった形で Hello World が表示されます。
データを変更してみる
では次にデータを変更してみます。例えばボタンを設置して、その押した時のアクションでラベルを変更します。
<div id="container">
<input type="button" name="add" id="add" value="追加" />
<span data-h5-bind="text"></span>
</div>
そしてJavaScriptは次のように書きます。
$("#add").on("click", function(e) {
item.set('text', 'changed');
});
こうするとボタンを押した時にラベルが変わります。
全体のソースコードは以下になります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
<link href="//code.htmlhifive.com/h5.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="//code.htmlhifive.com/h5.js"></script>
<title>TODO管理</title>
</head>
<body>
<div id="container">
<input type="button" name="add" id="add" value="追加" />
<span data-h5-bind="text"></span>
</div>
<script>
$(function() {
var manager = h5.core.data.createManager('TodoManager');
var model = manager.createModel({
name: 'TodoModel',
schema: {
id: {id: true},
text: {
type: 'string'
}
}
});
var item = model.create({
id: '1',
text: 'Hello World'
});
h5.core.view.bind($('#container'), item);
$("#add").on("click", function(e) {
item.set('text', 'changed');
});
});
</script>
</body>
</html>
データさえ変更すれば、UI側は自動で変更してくれるのはとても便利です。DOMを変更する場合、変更し忘れであったり、別な場所からもデータを変更してしまう（それを補足できない）といった問題があります。hifiveのデータバインドを使えば、UIとデータの一貫性は保たれますのでコードの品質が保たれるはずです。
データバインドについての詳細はチュートリアル（データバインド編） – hifiveでご覧いただけます。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
