画面初期表示にデータ取得を行うには？

良くある処理として、画面描画を行う際に初期データを取得することがあります。そのような処理をhifiveで行うにはどうしたら良いでしょうか。

答えは簡単で、コントローラの __ready メソッドを使います。細かく書くと、hifiveのコントローラ初期化プロセスは全部で4段階あります。

var controller = {
  __name: 'controller',
  templates: ['views/index.ejs']
  __construct: function() {
  },
  __init: function(){
  },
  __postInit:function(){
  },
  __ready(){
  },
};
h5.core.controller('body', controller);

このようになっており、上から順番に呼ばれます。

__construct

変数contollerがコントローラ化（インスタンス化）したタイミングで呼ばれます。

この時点ではまだテンプレートは読み込まれていませんので、表示処理をするには適していません。また、イベントハンドラのバインドも行われていません。逆にテンプレートを動的に変更したりするのには向いていそうです。

__init

この時点ではテンプレートの読み込みは終わっています。イベントハンドラのバインドは未処理です。

__ready

イベントハンドラのバインドまで終わったのが __ready になります。ロジックも読み込まれていますので、この時点で初期データ取得、読み込みなどを行うと良いと思います。

var chatController;
chatController = {
  __name: "ChatController",
  __templates: "views/messages.ejs",
  chatLogic: ChatLogic,
  __ready: function() {
    var me;
    me = this;
    return this.chatLogic.getData().done(function(messages) {
      return me.view.append(".messages", 'messages_template', {
        messages: messages
      });
    }).fail(function(data) {
      return console.log('error', data);
    });
  },
};
h5.core.controller(".container", chatController);

例えばこれは一例ですが、__readyの中でロジックを使ってデータを取り出し、その結果を表示に反映しています。

jQueryではDOMが構築されたタイミングとして $(function() { 〜 }); が良く使われますが、hifiveでは __ready を使うのが良いでしょう。

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