あくまでもメモ
- モデルの初期化
- TodoList
- 初期化時、表示に必要な範囲のデータは持っている(サーバサイドからビューに渡される)
- 表示後、例えば「次のページ」ボタンを押すと追加のデータがサーバからロードされる(非同期)
<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() {
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) {
};
function TodoListView($todoListContainer, todoList) {
this._$todoListContainer = $todoListContainer;
this._todoList = todoList;
this._viewModelMap = {};
this.initializeView();
}
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));
};