hifiveの基本、データモデル/バインドを理解する(1)

サーバサイド開発ではMVCと呼ばれる仕組みが一般的に使われるようになっています。しかしWebアプリケーションにおいてはまだまだ利用が進んでいないようです。

hifiveではデータモデルという仕組みによって情報の一元化ができるようになっています。データモデルが使えるようになると、HTML5 Webアプリケーションの開発がぐっと効率的になるでしょう。

データモデルの基本

データモデルの基本については チュートリアル（データモデル編） を参考にしてください。今回はサンプルのTodoアプリをベースに見ていきます。なおソースコードはGitHubにアップしてありますので参考にしてください（todo.html）

今回はまず、初期データの表示までを解説します。

最初の表示

このようにタスクの一覧が表示されます。 javascripts/todo.js を見ると次のように処理を行っています。

$(function() {
  h5.core.controller('#content', sample.todo.controller.TodoController);
});

これにより、 #content 以下に sample.todo.controller.TodoController が関連づけられます。コントローラーは javascripts/controller/todoController.js になります。

コントローラでの処理

todoController では __readyメソッドを使ってコントローラ化した後に処理を実行しています。コールバックされるメソッドについては コントローラのライフサイクルについて を参考にしてください。

__name: 'sample.todo.controller.TodoController',
todoLogic: sample.todo.logic.TodoLogic,
__ready: function() {
  var that = this;
  this.todoLogic.init().done(function(data) {
    that.view.bind('h5view#tmplTodos', {
      todos: data
    });
  });
},

todoLogic として関連づけている sample.todo.logic.TodoLogic を初期化しています。 promise を使っていますので 実行完了後、doneメソッドが呼ばれます。

そこでデータ（タスクの一覧）を受け取り、viewに関連づけています。

ロジックの処理

次に todoLogicのinitメソッドを見てみます。ファイルは javascripts/logic/todoLogic.js です。

  :
model: sample.todo.model.ToDoModel,
todos: h5.core.data.createObservableArray(),
  :
init: function() {
  var df = this.deferred();
  var that = this;
  $.ajax({
    url: SAMPLE_DATA_FILEPATH,
    dataType: 'json',
    cache: false,
    success: function(data) {
      var dataItems = that.model.create(data);
      that.todos.copyFrom(dataItems);
      df.resolve(that.todos);
    },
    error: function() {
      alert('サンプルデータの読み込みに失敗しました。');
    }
  });
  return df.promise();
},

Ajaxを使ってタスク一覧を取得しています。 SAMPLE_DATA_FILEPATH は json/todo.json になります。このファイルはタスクが配列になっているだけです。取得が成功した際に、

var dataItems = that.model.create(data);
that.todos.copyFrom(dataItems);

を実行しています。ここでモデルを作り、さらにロジックに定義されている todos に対してデータアイテムをコピーしています。dataはタスクの配列になっていますので、

var dataItems = that.model.create(data);

で生成されるdataItemsも配列になります。なおmodelというのは sample.todo.model.ToDoModel になります。

再度コントローラ

モデルが生成された後、 deferred に対してデータモデルを送っています。その結果、コントローラのdoneに対してデータモデルが送られてくる仕組みです。先ほどのコントローラー側のソースコードをもう一度掲載します。

__ready: function() {
  var that = this;
  this.todoLogic.init().done(function(data) {
    that.view.bind('h5view#tmplTodos', {
      todos: data
    });
  });
},

doneの後、h5view#tmplTodos に対してデータをバインドしています。HTMLテンプレートは todo.html の中に定義してあります。コメントで括っておくことで隠せるようになっています。

<!--{h5view id="tmplTodos"}
  <table class="todo-list" id="list">
    <thead>
      <tr><th>&nbsp;</th><th>内容</th></tr>
    </thead>
    <tbody data-h5-loop-context="todos">
      <tr>
        <td class="status">
          <input type="hidden" data-h5-bind="id" />
          <input type="checkbox" class="ui-check" data-h5-bind="attr(checked):checked"/>
        </td>
        <td class="content">
          <span data-h5-bind="content;style(text-decoration):contentStyle"></span>
        </td>
      </tr>
    </tbody>
  </table>
-->

data-h5-loop-context=“todos” という定義によって、tbody 以下を todos の回数分ループ処理します。data-h5-bind を用いることでJavaScriptから柔軟にデータをメンテナンスできるようになります。その他表示については データバインド用のHTML記述仕様 を参考にしてください。

今回はまず初期表示について紹介しました。単純にJSONデータを表示するのに比べると手順が多いですが、この後のタスク追加や変更、ステータス変更などにおいてバインドの仕組みが大いに役立ってきます！

hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive