Update Mithril example from v0.2 to v2

examples/mithril/index.html

@@ -10,17 +10,22 @@
 		<section class="todoapp"></section>
 		<footer class="info">
 			<p>Double-click to edit a todo</p>
-			<p>Created by <a href="http://taylorhakes.com">Taylor Hakes</a> and <a href="http://blogue.jpmonette.net">Jean-Philippe Monette</a> <br>(Special thanks to <a
-					href="https://github.com/lhorie/">Leo Horie</a>)</p>
+			<p>
+				Created by <a href="http://taylorhakes.com">Taylor Hakes</a> and <a href="http://blogue.jpmonette.net">Jean-Philippe Monette</a><br>
+				Updated by <a href="https://github.com/dead-claudia">Claudia Meadows</a><br>
+				(Special thanks to <a href="https://github.com/lhorie/">Leo Horie</a>)
+			</p>
 			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 		</footer>
 		<script src="node_modules/todomvc-common/base.js"></script>
 		<script src="node_modules/mithril/mithril.js"></script>
 		<script src="js/models/todo.js"></script>
 		<script src="js/models/storage.js"></script>
 		<script src="js/controllers/todo.js"></script>
-		<script src="js/views/main-view.js"></script>
 		<script src="js/views/footer-view.js"></script>
+		<script src="js/views/input-view.js"></script>
+		<script src="js/views/todo-view.js"></script>
+		<script src="js/views/main-view.js"></script>
 		<script src="js/app.js"></script>
 	</body>
 </html>

examples/mithril/js/app.js

@@ -1,12 +1,21 @@
 'use strict';
 /*global m */
 var app = app || {};
+var ctrl = new app.Controller();
 
 app.ENTER_KEY = 13;
 app.ESC_KEY = 27;
 
-m.route.mode = 'hash';
+m.route.prefix = '#!';
 m.route(document.querySelector('.todoapp'), '/', {
-	'/': app,
-	'/:filter': app
+	'/': {
+		render: function () {
+			return m(app.MainView, {ctrl: ctrl});
+		}
+	},
+	'/:filter': {
+		render: function () {
+			return m(app.MainView, {ctrl: ctrl});
+		}
+	}
 });

examples/mithril/js/controllers/todo.js

@@ -2,7 +2,7 @@
 /*global m */
 
 var app = app || {};
-app.controller = function () {
+app.Controller = function () {
 
 	// Todo collection
 	this.list = app.storage.get();
@@ -13,65 +13,67 @@ app.controller = function () {
 	});
 
 	// Temp title placeholder
-	this.title = m.prop('');
+	this.title = '';
 
 	// Todo list filter
-	this.filter = m.prop(m.route.param('filter') || '');
+	this.filter = function () {
+		return m.route.param('filter') || '';
+	};
 
 	this.add = function () {
-		var title = this.title().trim();
+		var title = this.title.trim();
 		if (title) {
 			this.list.push(new app.Todo({title: title}));
 			app.storage.put(this.list);
 		}
-		this.title('');
+		this.title = '';
 	};
 
 	this.isVisible = function (todo) {
 		switch (this.filter()) {
 			case 'active':
-				return !todo.completed();
+				return !todo.completed;
 			case 'completed':
-				return todo.completed();
+				return todo.completed;
 			default:
 				return true;
 		}
 	};
 
 	this.complete = function (todo) {
-		if (todo.completed()) {
-			todo.completed(false);
+		if (todo.completed) {
+			todo.completed = false;
 		} else {
-			todo.completed(true);
+			todo.completed = true;
 		}
 		app.storage.put(this.list);
 	};
 
 	this.edit = function (todo) {
-		todo.previousTitle = todo.title();
-		todo.editing(true);
+		todo.previousTitle = todo.title;
+		todo.editing = true;
 	};
 
 	this.doneEditing = function (todo, index) {
-		if (!todo.editing()) {
+		if (!todo.editing) {
 			return;
 		}
 
-		todo.editing(false);
-		todo.title(todo.title().trim());
-		if (!todo.title()) {
+		todo.editing = false;
+		todo.title = todo.title.trim();
+		if (!todo.title) {
 			this.list.splice(index, 1);
 		}
 		app.storage.put(this.list);
 	};
 
 	this.cancelEditing = function (todo) {
-		todo.title(todo.previousTitle);
-		todo.editing(false);
+		todo.title = todo.previousTitle;
+		todo.editing = false;
 	};
 
 	this.clearTitle = function () {
-		this.title('');
+		this.title = '';
 	};
 
 	this.remove = function (key) {
@@ -81,36 +83,25 @@ app.controller = function () {
 
 	this.clearCompleted = function () {
 		for (var i = this.list.length - 1; i >= 0; i--) {
-			if (this.list[i].completed()) {
+			if (this.list[i].completed) {
 				this.list.splice(i, 1);
 			}
 		}
 		app.storage.put(this.list);
 	};
 
 	this.amountCompleted = function () {
-		var amount = 0;
-		for (var i = 0; i < this.list.length; i++) {
-			if (this.list[i].completed()) {
-				amount++;
-			}
-		}
-		return amount;
+		return this.list.filter(function (todo) { return todo.completed; }).length;
 	};
 
 	this.allCompleted = function () {
-		for (var i = 0; i < this.list.length; i++) {
-			if (!this.list[i].completed()) {
-				return false;
-			}
-		}
-		return true;
+		return this.list.every(function (todo) { return todo.completed; });
 	};
 
-	this.completeAll = function () {
+	this.toggleAll = function () {
 		var allCompleted = this.allCompleted();
 		for (var i = 0; i < this.list.length; i++) {
-			this.list[i].completed(!allCompleted);
+			this.list[i].completed = !allCompleted;
 		}
 		app.storage.put(this.list);
 	};

examples/mithril/js/models/todo.js

@@ -1,5 +1,4 @@
 'use strict';
-/*global m */
 var app = app || {};
 
 var uniqueId = (function () {
@@ -11,8 +10,8 @@ var uniqueId = (function () {
 
 // Todo Model
 app.Todo = function (data) {
-	this.title = m.prop(data.title);
-	this.completed = m.prop(data.completed || false);
-	this.editing = m.prop(data.editing || false);
+	this.title = data.title;
+	this.completed = data.completed || false;
+	this.editing = data.editing || false;
 	this.key = uniqueId();
 };

examples/mithril/js/views/footer-view.js

@@ -2,35 +2,38 @@
 /*global m */
 var app = app || {};
 
-app.footer = function (ctrl) {
-	var amountCompleted = ctrl.amountCompleted();
-	var amountActive = ctrl.list.length - amountCompleted;
+app.FooterView = {
+	view: function (vnode) {
+		var amountCompleted = vnode.attrs.amountCompleted;
+		var amountActive = vnode.attrs.list.length - amountCompleted;
 
-	return m('footer.footer', [
-		m('span.todo-count', [
-			m('strong', amountActive), ' item' + (amountActive !== 1 ? 's' : '') + ' left'
-		]),
-		m('ul.filters', [
-			m('li', [
-				m('a[href=/]', {
-					config: m.route,
-					class: ctrl.filter() === '' ? 'selected' : ''
-				}, 'All')
+		return m('footer.footer', [
+			m('span.todo-count', [
+				m('strong', amountActive), ' item', amountActive !== 1 ? 's' : '', ' left'
 			]),
-			m('li', [
-				m('a[href=/active]', {
-					config: m.route,
-					class: ctrl.filter() === 'active' ? 'selected' : ''
-				}, 'Active')
+			m('ul.filters', [
+				m('li', [
+					m(m.route.Link, {
+						href: '/',
+						class: vnode.attrs.filter === '' ? 'selected' : ''
+					}, 'All')
+				]),
+				m('li', [
+					m(m.route.Link, {
+						href: '/active',
+						class: vnode.attrs.filter === 'active' ? 'selected' : ''
+					}, 'Active')
+				]),
+				m('li', [
+					m(m.route.Link, {
+						href: '/completed',
+						class: vnode.attrs.filter === 'completed' ? 'selected' : ''
+					}, 'Completed')
+				])
 			]),
-			m('li', [
-				m('a[href=/completed]', {
-					config: m.route,
-					class: ctrl.filter() === 'completed' ? 'selected' : ''
-				}, 'Completed')
-			])
-		]), ctrl.amountCompleted() === 0 ? '' : m('button.clear-completed', {
-			onclick: ctrl.clearCompleted.bind(ctrl)
-		}, 'Clear completed')
-	]);
+			amountCompleted === 0 ? '' : m('button.clear-completed', {
+				onclick: vnode.attrs.clearCompleted
+			}, 'Clear completed')
+		]);
+	}
 };

examples/mithril/js/views/input-view.js

@@ -0,0 +1,39 @@
+'use strict';
+/*global m */
+var app = app || {};
+
+app.InputView = function () {
+	var focused = false;
+
+	return {
+		view: function (vnode) {
+            var ctrl = vnode.attrs.ctrl;
+
+			return m('input.new-todo[placeholder="What needs to be done?"]', {
+                onkeyup: function (e) {
+                    if (e.keyCode === app.ENTER_KEY) {
+                        ctrl.add();
+                    } else if (e.keyCode === app.ESC_KEY) {
+                        ctrl.clearTitle();
+                    }
+                },
+                value: ctrl.title,
+                oninput: function (e) {
+                    ctrl.title = e.target.value;
+                },
+                oncreate: function (vnode) {
+                    if (!focused) {
+                        vnode.dom.focus();
+                        focused = true;
+                    }
+                },
+                onupdate: function (vnode) {
+                    if (!focused) {
+                        vnode.dom.focus();
+                        focused = true;
+                    }
+                }
+            });
+        }
+	};
+};