前回のデータバインドを使ったHello World表示に続いて、今回はさらにデータの入力との連携も行ってみたいと思います。なお前回終了時のコードは以下になります。
<!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>
ここで、入力欄を追加します。
<div id="container">
<input type="button" name="add" id="add" value="追加" />
<span data-h5-bind="text"></span><br />
<!-- 以下を追加 -->
<input type="text" name="edit" id="edit" data-h5-bind="attr(value):text" />
</div>
data-h5-bindを使ってvalueに値を表示する場合は、 data-h5-bind="attr(value):text" といった方法を使います。attr(value)で入力欄のvalue要素を指定します。そしてその時に表示する値を :text という指定で表示します。
次に入力欄を編集した時のイベントをkeyupで受け取ります。そしてその値をitemにセットします。
$("#edit").on("keyup", function(e) {
item.set('text', e.currentTarget.value);
});
これで完了です。HTML全体は次のようになります。
<!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><br />
<input type="text" name="edit" id="edit" data-h5-bind="attr(value):text" />
</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');
});
// 値を変更した時の処理
$("#edit").on("keyup", function(e) {
item.set('text', e.currentTarget.value);
});
});
</script>
</body>
</html>
実際に動かすと次のようになります。
このようにデータの修正と表示の反映がリアルタイム化できると、データ編集後のAjaxを使ったサーバへの保存処理もそのまま使えるようになります。次回はもう少し複雑な表示を行ってみたいと思います。
データバインドについての詳細はチュートリアル（データバインド編） – hifiveでご覧いただけます。
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive
