OO-ize DOM builder, improve performance (part 1), add benchmarking suite

bench/app/js/views/main-view.js

@@ -0,0 +1,119 @@
+/* global m */
+(function (app) {
+	"use strict"
+
+	// View utility
+	app.watchInput = function (onenter, onescape) {
+		return function (e) {
+			if (e.keyCode === app.ENTER_KEY) {
+				onenter()
+			} else if (e.keyCode === app.ESC_KEY) {
+				onescape()
+			}
+		}
+	}
+
+	var header = {
+		controller: function () {
+			this.focused = false
+		},
+
+		view: function (ctrl, parentCtrl) {
+			return m("header#header", [
+				m("h1", "todos"),
+				m('input#new-todo[placeholder="What needs to be done?"]', {
+					onkeyup: app.watchInput(
+						function () {
+							parentCtrl.add()
+						},
+						function () {
+							parentCtrl.clearTitle()
+						}),
+					value: parentCtrl.title(),
+					oninput: m.withAttr("value", parentCtrl.title),
+					config: function (element) {
+						if (!ctrl.focused) {
+							element.focus()
+							ctrl.focused = true
+						}
+					}
+				})
+			])
+		}
+	}
+
+	var todo = {
+		view: function (_, parentCtrl, task, index) {
+			return m("li", {
+				class: (task.completed() ? "completed" : "") +
+					(task.editing() ? " editing" : "")
+			}, [
+				m(".view", [
+					m("input.toggle[type=checkbox]", {
+						onclick: m.withAttr("checked", function () {
+							parentCtrl.complete(task)
+						}),
+						checked: task.completed()
+					}),
+					m("label", {
+						ondblclick: function () {
+							parentCtrl.edit(task)
+						}
+					}, task.title()),
+					m("button.destroy", {
+						onclick: function () {
+							parentCtrl.remove(index)
+						}
+					})
+				]),
+				m("input.edit", {
+					value: task.title(),
+					onkeyup: app.watchInput(
+						function () {
+							parentCtrl.doneEditing(task, index)
+						},
+						function () {
+							parentCtrl.cancelEditing(task)
+						}),
+					oninput: m.withAttr("value", task.title),
+					config: function (element) {
+						if (task.editing()) {
+							element.focus()
+							element.selectionStart =
+								element.value.length
+						}
+					},
+					onblur: function () {
+						parentCtrl.doneEditing(task, index)
+					}
+				})
+			])
+		}
+	}
+
+	app.view = function (ctrl) {
+		return m("div", [
+			m(header, ctrl),
+			m("section#main", {
+				style: {
+					display: ctrl.list.length ? "" : "none"
+				}
+			}, [
+				m("input#toggle-all[type=checkbox]", {
+					onclick: ctrl.completeAll.bind(ctrl),
+					checked: ctrl.allCompleted()
+				}),
+				m("ul#todo-list", [
+					ctrl.list
+					.filter(function () {
+						return ctrl.isVisible()
+					})
+					.map(function (task, index) {
+						return m(todo, ctrl, task, index)
+					})
+				])
+			]),
+			ctrl.list.length === 0 ? "" : m(app.footer, ctrl)
+		])
+	}
+})(this.app || (this.app = {}))