Skip to content

UIを気にしないで済むデータバインドの使い方

by : 2015/06/16

最近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

From → hifive, HTML5

コメントは停止中です。

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