全体のデータ修正とそのリアルタイム反映に加えて、今回はモデルのメソッドを使ってみたいと思います。
例えばTwitterなどでは入力している文字数が分かるようになっています。同じように文字数を出してみましょう。
前回までの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>
入力文字数を出す部分を作る
HTML上で現在の入力文字数を出すようにします。
<input type="text" name="edit" id="edit" data-h5-bind="attr(value):text" />
<!-- 追加 -->
(<span data-h5-bind="text_length"></span>)
モデルにメソッドを追加
次にモデルに text_length メソッドを追加します。
var model = manager.createModel({
name: 'TodoModel',
schema: {
id: {id: true},
text: {
type: 'string'
},
//
// text_lengthの追加（ここから）
//
text_length: {
type: 'integer',
depend: {
on: 'text',
calc: function () {
return this.get("text").length
}
}
}
//
// text_lengthの追加（ここまで）
//
}
});
text_lengthは元々のデータフォーマットには存在しない項目ですが、schemaの中に定義します。型の種類と、関連するデータを指定します（今回はtextです）。そしてcalcオプションで実際の処理内容を指定します。textデータはgetメソッドを使ってデータを取り出します。そしてその文字数をlengthで取得、返却しています。
ここまでできあがると、次のように文字を入力する度に文字数が変わるようにします。
新しいメソッドを自分で追加できるのでリアルタイムバリデーションなどで利用が可能です。次回は項目を増やして配列を管理してみましょう。
