GUI Application Initialization. memo.

あくまでもメモ

  • モデルの初期化
    • TodoList
      • 初期化時、表示に必要な範囲のデータは持っている(サーバサイドからビューに渡される)
      • 表示後、例えば「次のページ」ボタンを押すと追加のデータがサーバからロードされる(非同期)
<!DOCTYPE html>
<html >
...
<body>
  <div id="todo-list-container">
    <ul class="todo-list">
      <% for (var i = 0, len = items.length; i < len; i++) { %>
      <li class="todo-item" data-todo-id="<%= items[i].id %>">
        <span class="todo-item-title"><%= items[i].title %></span>
        <span class="todo-item-status <%= TodoHelper.getStatusStyle(items[i]); %>"><%= items[i].title %></span>
      </li>
      <% } %>
    </ul>
  </div>
</body>
</html>
function Application() {
  // モデルの初期化(ここでは TodoList しか初期化しないが、別コンポーネントがあればそちらもモデルを初期化しておく)
  var todoList = new TodoList(items);

  // ビューの初期化、モデルを渡してインスタンス化する
  var todoListView = new TodoView($('#todo-list-container'), todoList);
}
new Application();
function TodoList(items) {
  this._items = items;
}

TodoList.prototype.getItems = function() {
  // すべてのアイテムを返す。
};

TodoList.prototype.getRangeItems = function(start, end, callback) {
  // start, end の範囲のデータを取得する、まだ持っていないデータはサーバに問い合わせを行う。
  // 非同期処理を含むので callback で戻り値を返却する。
};
function TodoListView($todoListContainer, todoList) {
  this._$todoListContainer = $todoListContainer;
  this._todoList = todoList;
  this._viewModelMap = {};

  // 今回はテンプレート上の DOM とモデルの紐付けが終わってないものがあるので初期化
  this.initializeView();

  // 今回はテンプレート上のレンダリングが終わっているが、終わっていない場合はここでレンダリングする
  // this.udpateView(); // 表示範囲を DOM から計算して、モデルからデータをロードして表示する
}

// この処理は「テンプレート上の初期表示」と「モデルに渡される初期データ」が一致していることを想定している。ていうか一致できないなら「テンプレート上の初期表示」やめろ。
TodoListView.prototype.initializeView = function () {
  this._todoList.getItems(function(err, items) { // 読み込みエラーが起こる場合はイベントで繋ぎ込み。
    if (err) return;
    var $items = this._$todoListContainer.find('.todo-list-item');
    _.each(items, function(item, i) {
      this._viewModelMap[item.getId()] = new TodoItemView($items[i], item);
    }.this);
  }.bind(this));
};