Skip to content

UIを気にしないで済むデータバインドの使い方(リアルタイム反映編)

by : 2015/06/18

前回のデータバインドを使った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

From → hifive, HTML5

コメントは停止中です。

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