😹 The view is now a class. Boom

js/view.js

@@ -1,6 +1,5 @@
 import {qs, qsa, $on, $parent, $delegate} from './helpers';
 
-export default View;
 /**
  * View that abstracts away the browser's DOM completely.
  * It has two simple entry points:
@@ -10,7 +9,8 @@ export default View;
  *   - render(command, parameterObject)
  *     Renders the given command with the options
  */
-function View(template) {
+export default class View {
+	constructor(template) {
 		this.template = template;
 
 		this.ENTER_KEY = 13;
@@ -24,56 +24,18 @@ function View(template) {
 		this.$toggleAll = qs('.toggle-all');
 		this.$newTodo = qs('.new-todo');
 	}
-
+	_removeItem(id) {
-View.prototype._removeItem = function (id) {
 		var elem = qs('[data-id="' + id + '"]');
 
 		if (elem) {
 			this.$todoList.removeChild(elem);
 		}
-};
+	}
-
+	_clearCompletedButton(completedCount, visible) {
-View.prototype._clearCompletedButton = function (completedCount, visible) {
 		this.$clearCompleted.innerHTML = this.template.clearCompletedButton(completedCount);
 		this.$clearCompleted.style.display = visible ? 'block' : 'none';
-};
-
-View.prototype._setFilter = function (currentPage) {
-	qs('.filters .selected').className = '';
-	qs('.filters [href="#/' + currentPage + '"]').className = 'selected';
-};
-
-View.prototype._elementComplete = function (id, completed) {
-	var listItem = qs('[data-id="' + id + '"]');
-
-	if (!listItem) {
-		return;
 	}
-
+	_editItemDone(id, title) {
-	listItem.className = completed ? 'completed' : '';
-
-	// In case it was toggled from an event and not by clicking the checkbox
-	qs('input', listItem).checked = completed;
-};
-
-View.prototype._editItem = function (id, title) {
-	var listItem = qs('[data-id="' + id + '"]');
-
-	if (!listItem) {
-		return;
-	}
-
-	listItem.className = listItem.className + ' editing';
-
-	var input = document.createElement('input');
-	input.className = 'edit';
-
-	listItem.appendChild(input);
-	input.focus();
-	input.value = title;
-};
-
-View.prototype._editItemDone = function (id, title) {
 		var listItem = qs('[data-id="' + id + '"]');
 
 		if (!listItem) {
@@ -88,9 +50,8 @@ View.prototype._editItemDone = function (id, title) {
 		qsa('label', listItem).forEach(function (label) {
 			label.textContent = title;
 		});
-};
+	}
-
+	render(viewCmd, parameter) {
-View.prototype.render = function (viewCmd, parameter) {
 		var that = this;
 		var viewCommands = {
 			showEntries: function () {
@@ -112,16 +73,16 @@ View.prototype.render = function (viewCmd, parameter) {
 				that.$toggleAll.checked = parameter.checked;
 			},
 			setFilter: function () {
-			that._setFilter(parameter);
+				_setFilter(parameter);
 			},
 			clearNewTodo: function () {
 				that.$newTodo.value = '';
 			},
 			elementComplete: function () {
-			that._elementComplete(parameter.id, parameter.completed);
+				_elementComplete(parameter.id, parameter.completed);
 			},
 			editItem: function () {
-			that._editItem(parameter.id, parameter.title);
+				_editItem(parameter.id, parameter.title);
 			},
 			editItemDone: function () {
 				that._editItemDone(parameter.id, parameter.title);
@@ -129,19 +90,13 @@ View.prototype.render = function (viewCmd, parameter) {
 		};
 
 		viewCommands[viewCmd]();
-};
+	}
-
+	_bindItemEditDone(handler) {
-View.prototype._itemId = function (element) {
-	var li = $parent(element, 'li');
-	return parseInt(li.dataset.id, 10);
-};
-
-View.prototype._bindItemEditDone = function (handler) {
 		var that = this;
 		$delegate(that.$todoList, 'li .edit', 'blur', function () {
 			if (!this.dataset.iscanceled) {
 				handler({
-				id: that._itemId(this),
+					id: _itemId(this),
 					title: this.value
 				});
 			}
@@ -154,21 +109,19 @@ View.prototype._bindItemEditDone = function (handler) {
 				this.blur();
 			}
 		});
-};
+	}
-
+	_bindItemEditCancel(handler) {
-View.prototype._bindItemEditCancel = function (handler) {
 		var that = this;
 		$delegate(that.$todoList, 'li .edit', 'keyup', function (event) {
 			if (event.keyCode === that.ESCAPE_KEY) {
 				this.dataset.iscanceled = true;
 				this.blur();
 
-			handler({id: that._itemId(this)});
+				handler({id: _itemId(this)});
 			}
 		});
-};
+	}
-
+	bind(event, handler) {
-View.prototype.bind = function (event, handler) {
 		var that = this;
 		if (event === 'newTodo') {
 			$on(that.$newTodo, 'change', function () {
@@ -187,18 +140,18 @@ View.prototype.bind = function (event, handler) {
 
 		} else if (event === 'itemEdit') {
 			$delegate(that.$todoList, 'li label', 'dblclick', function () {
-			handler({id: that._itemId(this)});
+				handler({id: _itemId(this)});
 			});
 
 		} else if (event === 'itemRemove') {
 			$delegate(that.$todoList, '.destroy', 'click', function () {
-			handler({id: that._itemId(this)});
+				handler({id: _itemId(this)});
 			});
 
 		} else if (event === 'itemToggle') {
 			$delegate(that.$todoList, '.toggle', 'click', function () {
 				handler({
-				id: that._itemId(this),
+					id: _itemId(this),
 					completed: this.checked
 				});
 			});
@@ -209,4 +162,45 @@ View.prototype.bind = function (event, handler) {
 		} else if (event === 'itemEditCancel') {
 			that._bindItemEditCancel(handler);
 		}
-};
+	}
+}
+
+function _setFilter(currentPage) {
+	qs('.filters .selected').className = '';
+	qs('.filters [href="#/' + currentPage + '"]').className = 'selected';
+}
+
+function _elementComplete(id, completed) {
+	var listItem = qs('[data-id="' + id + '"]');
+
+	if (!listItem) {
+		return;
+	}
+
+	listItem.className = completed ? 'completed' : '';
+
+	// In case it was toggled from an event and not by clicking the checkbox
+	qs('input', listItem).checked = completed;
+}
+
+function _editItem(id, title) {
+	var listItem = qs('[data-id="' + id + '"]');
+
+	if (!listItem) {
+		return;
+	}
+
+	listItem.className = listItem.className + ' editing';
+
+	var input = document.createElement('input');
+	input.className = 'edit';
+
+	listItem.appendChild(input);
+	input.focus();
+	input.value = title;
+}
+
+function _itemId(element) {
+	var li = $parent(element, 'li');
+	return parseInt(li.dataset.id, 10);
+}