Revert "Revert "More performance improvements + etc.""

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

@@ -0,0 +1,40 @@
+/* global m */
+(function (app) {
+	"use strict"
+
+	var filter = {
+		view: function (_, ctrl, expected, name, href) {
+			return m("li", [
+				m("a", {
+					href: href,
+					config: m.route,
+					class: ctrl.filter() === expected ? "selected" : ""
+				}, name)
+			])
+		}
+	}
+
+	app.footer = {
+		view: function (_, ctrl) {
+			var amountCompleted = ctrl.amountCompleted()
+			var amountActive = ctrl.list.length - amountCompleted
+
+			return m("footer#footer", [
+				m("span#todo-count", [
+					m("strong", amountActive), " item" +
+						(amountActive !== 1 ? "s" : "") + " left"
+				]),
+				m("ul#filters", [
+					m(filter, ctrl, "", "All", "/"),
+					m(filter, ctrl, "active", "Active", "/active"),
+					m(filter, ctrl, "completed", "Completed", "/completed")
+				]),
+				ctrl.amountCompleted() ? m("button#clear-completed", {
+					onclick: function () {
+						ctrl.clearCompleted()
+					}
+				}, "Clear completed") : null
+			])
+		}
+	}
+})(this.app || (this.app = {}))

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 = {}))