Skip to content

UIを気にしないで済むデータバインドの使い方(独自メソッド編)

by : 2015/06/25

全体のデータ修正とそのリアルタイム反映に加えて、今回はモデルのメソッドを使ってみたいと思います。

例えば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で取得、返却しています。


ここまでできあがると、次のように文字を入力する度に文字数が変わるようにします。



新しいメソッドを自分で追加できるのでリアルタイムバリデーションなどで利用が可能です。次回は項目を増やして配列を管理してみましょう。

From → hifive, HTML5

コメントは停止中です。

%d人のブロガーが「いいね」をつけました。