masahirompp/controller.js

## controller.js
(function(todo) {
  'use strict';

  // viewの追加イベントを監視。TodoListに新規Todoを追加する。
  todo.View.on('add', function(description) {
    todo.TodoList.add(new todo.Todo(todo.TodoList.length, description));
    todo.View.clearInput();
  });

  // viewの変更イベントを監視。モデルの状態を更新を命令。
  todo.View.on('change', function(index) {
    todo.TodoList[index].done();
  });

})(this.todo);

## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Todo MVC Sample</title>
  <style>
  .completed {
    text-decoration:line-through;
  }
  </style>
</head>
<body>
  <div>
    <input type="text" id="todoInput">
  </div>
  <div>
    <ul id="todoList"></ul>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
  <script src="./util.js"></script>
  <script src="./model.js"></script>
  <script src="./view.js"></script>
  <script src="./controller.js"></script>
</body>
</html>

## model.js
(function(_, util, exports) {
  'use strict';

  // Model
  var Todo = _.extend(function(id, description) {
    this.id = id;
    this.description = description;
    this.complete = false;
  }, util.events());

  Todo.prototype.done = function() {
    this.complete = true;
    Todo.trigger('change', this);
  };

  // Collection
  var TodoList = _.extend([], util.events());

  TodoList.add = function(todo) {
    this.push(todo);
    this.trigger('change', TodoList);
  };

  // export
  exports.Todo = Todo;
  exports.TodoList = TodoList;

})(this._, this.util, this.todo = this.todo || {});

## util.js
(function(_, exports) {
  'use strict';

  exports.events = function() {
    var events = {};
    return {
      on: function(name, func) {
        (events[name] || (events[name] = []))
          .push(func);
        return this;
      },
      trigger: function(name /*, ...args */ ) {
        var funcs = events[name] || [];
        var args = _.rest(arguments);
        funcs.forEach(function(func) {
          setTimeout(function() {
            func.apply(null, args);
          }, 0);
        });
        return this;
      }
    };
  };

})(this._, this.util = this.util || {});

## view.js
(function(_, util, exports) {
  'use strict';

  // モデルの参照
  var Todo = exports.Todo;
  var TodoList = exports.TodoList;

  // DOM参照
  var input = window.document.getElementById('todoInput');
  var ul = window.document.getElementById('todoList');

  var View = _.extend({}, util.events());
  var todoHtml = _.template('<li id="todo_<%= id %>" <% if(complete) { %>class="completed" <% }%>><%= description %></li>');

  // DOM操作 TodoListを描画
  function render(todoList) {
    ul.innerHTML = todoList.reduce(function(html, todo) {
      return html + todoHtml(todo);
    }, '');
  }

  // DOM操作 Todoの状態を更新
  function complete(todo) {
    var target = window.document.getElementById('todo_' + todo.id);
    target.className = todo.complete ? 'completed' : '';
  }

  // DOM操作 入力をクリア
  function clearInput() {
    input.value = '';
  }
  View.clearInput = clearInput; // export

  // モデルを監視
  Todo.on('change', complete);
  TodoList.on('change', render);

  // Event通知
  input.addEventListener('keydown', function(e) {
    if (e.keyCode === 13 && e.target.value) View.trigger('add', e.target.value); // inputでENTERが押下された場合に通知
  });
  ul.addEventListener('click', function(e) {
    if (e.target.tagName.toLowerCase() === 'li') {
      View.trigger('change', _.last(e.target.id.split('_'))); // 各アイテムがクリックされた時に通知
    }
  });

  // export
  exports.View = View;

})(this._, this.util, this.todo);
	(function(todo) {
	'use strict';

	// viewの追加イベントを監視。TodoListに新規Todoを追加する。
	todo.View.on('add', function(description) {
	todo.TodoList.add(new todo.Todo(todo.TodoList.length, description));
	todo.View.clearInput();
	});

	// viewの変更イベントを監視。モデルの状態を更新を命令。
	todo.View.on('change', function(index) {
	todo.TodoList[index].done();
	});

	})(this.todo);
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>Todo MVC Sample</title>
	<style>
	.completed {
	text-decoration:line-through;
	}
	</style>
	</head>
	<body>
	<div>
	<input type="text" id="todoInput">
	</div>
	<div>
	<ul id="todoList"></ul>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
	<script src="./util.js"></script>
	<script src="./model.js"></script>
	<script src="./view.js"></script>
	<script src="./controller.js"></script>
	</body>
	</html>
	(function(_, util, exports) {
	'use strict';

	// Model
	var Todo = _.extend(function(id, description) {
	this.id = id;
	this.description = description;
	this.complete = false;
	}, util.events());

	Todo.prototype.done = function() {
	this.complete = true;
	Todo.trigger('change', this);
	};

	// Collection
	var TodoList = _.extend([], util.events());

	TodoList.add = function(todo) {
	this.push(todo);
	this.trigger('change', TodoList);
	};

	// export
	exports.Todo = Todo;
	exports.TodoList = TodoList;

	})(this._, this.util, this.todo = this.todo \|\| {});
	(function(_, exports) {
	'use strict';

	exports.events = function() {
	var events = {};
	return {
	on: function(name, func) {
	(events[name] \|\| (events[name] = []))
	.push(func);
	return this;
	},
	trigger: function(name /, ...args / ) {
	var funcs = events[name] \|\| [];
	var args = _.rest(arguments);
	funcs.forEach(function(func) {
	setTimeout(function() {
	func.apply(null, args);
	}, 0);
	});
	return this;
	}
	};
	};

	})(this._, this.util = this.util \|\| {});
	(function(_, util, exports) {
	'use strict';

	// モデルの参照
	var Todo = exports.Todo;
	var TodoList = exports.TodoList;

	// DOM参照
	var input = window.document.getElementById('todoInput');
	var ul = window.document.getElementById('todoList');

	var View = _.extend({}, util.events());
	var todoHtml = _.template('<li id="todo_<%= id %>" <% if(complete) { %>class="completed" <% }%>><%= description %></li>');

	// DOM操作 TodoListを描画
	function render(todoList) {
	ul.innerHTML = todoList.reduce(function(html, todo) {
	return html + todoHtml(todo);
	}, '');
	}

	// DOM操作 Todoの状態を更新
	function complete(todo) {
	var target = window.document.getElementById('todo_' + todo.id);
	target.className = todo.complete ? 'completed' : '';
	}

	// DOM操作入力をクリア
	function clearInput() {
	input.value = '';
	}
	View.clearInput = clearInput; // export

	// モデルを監視
	Todo.on('change', complete);
	TodoList.on('change', render);

	// Event通知
	input.addEventListener('keydown', function(e) {
	if (e.keyCode === 13 && e.target.value) View.trigger('add', e.target.value); // inputでENTERが押下された場合に通知
	});
	ul.addEventListener('click', function(e) {
	if (e.target.tagName.toLowerCase() === 'li') {
	View.trigger('change', _.last(e.target.id.split('_'))); // 各アイテムがクリックされた時に通知
	}
	});

	// export
	exports.View = View;

	})(this._, this.util, this.todo);