tastejs · altmind · May 19, 2015 · arthurvr · May 29, 2015
diff --git a/examples/rivets/.gitignore b/examples/rivets/.gitignore
@@ -0,0 +1,14 @@
+node_modules/todomvc-common/*
+!node_modules/todomvc-common/base.css
+!node_modules/todomvc-common/base.js
+
+node_modules/todomvc-app-css/*
+!node_modules/todomvc-app-css/index.css
+
+node_modules/director/*
+!node_modules/director/build/director.js
+
+node_modules/rivets/*
+!node_modules/rivets/dist/
+node_modules/rivets/dist/*
+!node_modules/rivets/dist/rivets.bundled.min.js
diff --git a/examples/rivets/index.html b/examples/rivets/index.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<html lang="en" data-framework="rivets">
+	<head>
+		<meta charset="utf-8">
+		<title>Rivets • TodoMVC</title>
+		<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
+		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
+	</head>
+	<body>
+		<script type="text/template" id="todos">
+			<header class="header">
+				<h1>todos</h1>
+				<form rv-on-submit="addTodo">
+					<input
+						class="new-todo"
+						placeholder="What needs to be done?"
+						rv-value="newTodo"
+						autofocus>
+				</form>
+			</header>
+
+			<section class="main" rv-show="todos.all | length">
+				<input
+					class="toggle-all"
+					type="checkbox"
+					rv-prop-checked="todos.isAllCompleted < all"
+					rv-on-change="toggleAllCompleted">
+
+				<label for="toggle-all">Mark all as complete</label>
+
+				<ul class="todo-list">
+					<li
+						rv-each-todo="todos.filtered < all statusFilter"
+						rv-class-completed="todo.completed"
+						rv-class-editing="todos.editing | eq todo">
+
+						<todo todo="todo"></todo>
+					</li>
+				</ul>
+			</section>
+
+			<footer class="footer" rv-show="todos.all | length">
+				<filter-bar todos="todos"></filter-bar>
+			</footer> 
+		</script>
+
+		<script type="text/template" id="todo">
+			<div>
+				<div class="view">
+					<input
+						class="toggle"
+						type="checkbox"
+						rv-prop-checked="todo.completed"
+						rv-on-change="toggle">
+
+					<label rv-on-dblclick="edit">{ todo.title }</label>
+					<button class="destroy" rv-on-click="remove"></button>
+				</div>
+
+				<form rv-on-submit="save">
+					<input
+						class="edit"
+						rv-value="newTitle"
+						rv-escape="revert"
+						rv-on-blur="save"
+						rv-focus="todos.editing | eq undefined | not">
+				</form>
+			</div>
+		</script>
+
+		<script type="text/template" id="filter-bar">
+			<span class="todo-count">
+				<strong>{ todos.active < all | length }</strong> 
+				{ todos.active < all | length | eq 1 | switch 'item' 'items' }
+				left
+			</span>
+
+			<ul class="filters">
+				<li rv-each-filter="filters">
+					<a
+						rv-class-selected="todos.statusFilter | eq filter.id"
+						rv-href="'#/' | append filter.id">
+
+						{ filter.title }
+					</a>
+				</li>
+			</ul>
+
+			<button class="clear-completed" rv-on-click="clearCompleted" rv-show="todos.completed < all | length">
+				Clear completed
+			</button>
+		</script>
+
+		<section class="todoapp"></section>
+
+		<footer class="info">
+			<p>Double-click to edit a todo</p>
+
+			<p>
+				Written by <a href="https://github.com/mikeric">Michael Richards</a>
+				and <a href="http://altio.us">Andrew Gurinovich</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/director/build/director.js"></script>
+		<script src="node_modules/rivets/dist/rivets.bundled.min.js"></script>
+
+		<script src="js/formatters.js"></script>
+		<script src="js/binders/escape.js"></script>
+		<script src="js/binders/focus.js"></script>
+		<script src="js/binders/prop.js"></script>
+		<script src="js/stores/todo-store.js"></script>
+		<script src="js/components/todos.js"></script>
+		<script src="js/components/todo.js"></script>
+		<script src="js/components/filter-bar.js"></script>
+		<script src="js/routes.js"></script>
+		<script src="js/app.js"></script>
+	</body>
+</html>
diff --git a/examples/rivets/js/app.js b/examples/rivets/js/app.js
@@ -0,0 +1,6 @@
+/*global rivets */
+(function (rivets) {
+	'use strict';
+
+	rivets.init('todos', document.querySelector('.todoapp'));
+})(rivets);
diff --git a/examples/rivets/js/binders/escape.js b/examples/rivets/js/binders/escape.js
@@ -0,0 +1,31 @@
+/*global rivets */
+(function (rivets) {
+	'use strict';
+
+	var ESCAPE_KEY = 27;
+	var EVENT = 'keydown';
+
+	rivets.binders.escape = {
+		function: true,
+
+		unbind: function (el) {
+			if (this.handler) {
+				el.removeEventListener(EVENT, this.handler);
+			}
+		},
+
+		routine: function (el, value) {
+			if (this.handler) {
+				el.removeEventListener(EVENT, this.handler);
+			}
+
+			this.handler = this.eventHandler(function (ev) {
+				if (ev.keyCode === ESCAPE_KEY) {
+					value.apply(this, arguments);
+				}
+			});
+
+			el.addEventListener(EVENT, this.handler);
+		}
+	};
+})(rivets);
diff --git a/examples/rivets/js/binders/focus.js b/examples/rivets/js/binders/focus.js
@@ -0,0 +1,10 @@
+/*global rivets */
+(function (rivets) {
+	'use strict';
+
+	rivets.binders.focus = function (el, value) {
+		if (value) {
+			el.focus();
+		}
+	};
+})(rivets);
diff --git a/examples/rivets/js/binders/prop.js b/examples/rivets/js/binders/prop.js
@@ -0,0 +1,8 @@
+/*global rivets */
+(function (rivets) {
+	'use strict';
+
+	rivets.binders['prop-*'] = function (el, value) {
+		el[this.args[0]] = value;
+	};
+})(rivets);
diff --git a/examples/rivets/js/components/filter-bar.js b/examples/rivets/js/components/filter-bar.js
@@ -0,0 +1,31 @@
+/*global rivets, TodoStore */
+(function (rivets, TodoStore) {
+	'use strict';
+
+	// FilterBar component constructor.
+	var FilterBar = function (todos) {
+		this.todos = todos;
+
+		this.filters = [
+			{id: '', title: 'All'},
+			{id: 'active', title: 'Active'},
+			{id: 'completed', title: 'Completed'}
+		];
+	};
+
+	// Clears all completed todo items.
+	FilterBar.prototype.clearCompleted = function () {
+		TodoStore.clearCompleted();
+	};
+
+	// Register <filter-bar> component.
+	rivets.components['filter-bar'] = {
+		template: function () {
+			return document.querySelector('#filter-bar').innerHTML;
+		},
+
+		initialize: function (el, data) {
+			return new FilterBar(data.todos);
+		}
+	};
+})(rivets, TodoStore);
diff --git a/examples/rivets/js/components/todo.js b/examples/rivets/js/components/todo.js
@@ -0,0 +1,64 @@
+/*global rivets, TodoStore */
+(function (rivets, TodoStore) {
+	'use strict';
+
+	// Todo component constructor.
+	var Todo = function (todo) {
+		this.edit = this.edit.bind(this);
+		this.save = this.save.bind(this);
+		this.toggle = this.toggle.bind(this);
+		this.revert = this.revert.bind(this);
+		this.remove = this.remove.bind(this);
+		this.todos = TodoStore;
+
+		this.todo = todo;
+	};
+
+	// Starts edit mode for the todo item.
+	Todo.prototype.edit = function () {
+		this.newTitle = this.todo.title;
+		TodoStore.editing = this.todo;
+	};
+
+	// Saves the todo item's new title. If the new title is empty, then the todo
+	// item will be removed instead.
+	Todo.prototype.save = function (ev) {
+		ev.preventDefault();
+
+		if (this.newTitle.trim()) {
+			this.todo.title = this.newTitle.trim();
+			TodoStore.save();
+		} else {
+			this.remove();
+		}
+
+		this.revert();
+	};
+
+	// Toggles the item as complete / active.
+	Todo.prototype.toggle = function () {
+		TodoStore.toggle(this.todo);
+	};
+
+	// Reverts changes made for the new title and leaves edit mode.
+	Todo.prototype.revert = function () {
+		this.newTitle = this.todo.title;
+		TodoStore.editing = null;
+	};
+
+	// Removes the todo item.
+	Todo.prototype.remove = function () {
+		TodoStore.remove(this.todo);
+	};
+
+	// Register <todo> component.
+	rivets.components.todo = {
+		template: function () {
+			return document.querySelector('#todo').innerHTML;
+		},
+
+		initialize: function (el, data) {
+			return new Todo(data.todo);
+		}
+	};
+})(rivets, TodoStore);
diff --git a/examples/rivets/js/components/todos.js b/examples/rivets/js/components/todos.js
@@ -0,0 +1,41 @@
+/*global rivets, TodoStore */
+(function (rivets, TodoStore) {
+	'use strict';
+
+	// Todos component constructor.
+	var Todos = function () {
+		this.addTodo = this.addTodo.bind(this);
+		this.todos = TodoStore;
+		this.newTodo = '';
+	};
+
+	// Adds a new todo item.
+	Todos.prototype.addTodo = function (ev) {
+		ev.preventDefault();
+
+		if (this.newTodo.trim().length) {
+			TodoStore.add({
+				title: this.newTodo.trim(),
+				completed: false
+			});
+		}
+
+		this.newTodo = '';
+	};
+
+	// Toggles all todo items as complete / active.
+	Todos.prototype.toggleAllCompleted = function () {
+		TodoStore.markAll(!TodoStore.isAllCompleted());
+	};
+
+	// Register <todos> component.
+	rivets.components.todos = {
+		template: function () {
+			return document.querySelector('#todos').innerHTML;
+		},
+
+		initialize: function () {
+			return new Todos();
+		}
+	};
+})(rivets, TodoStore);
diff --git a/examples/rivets/js/formatters.js b/examples/rivets/js/formatters.js
@@ -0,0 +1,24 @@
+/*global rivets */
+(function (rivets) {
+	'use strict';
+
+	rivets.formatters.length = function (value) {
+		return value.length;
+	};
+
+	rivets.formatters.not = function (value) {
+		return !value;
+	};
+
+	rivets.formatters.eq = function (value, eqValue) {
+		return value === eqValue;
+	};
+
+	rivets.formatters.append = function (value, appValue) {
+		return value + appValue;
+	};
+
+	rivets.formatters.switch = function (value, tValue, fValue) {
+		return value ? tValue : fValue;
+	};
+})(rivets);
diff --git a/examples/rivets/js/routes.js b/examples/rivets/js/routes.js
@@ -0,0 +1,26 @@
+/*global Router, TodoStore */
+(function (Router, TodoStore) {
+	'use strict';
+
+	var routes = {
+		'/': function () {
+			TodoStore.statusFilter = '';
+		},
+
+		'/active': function () {
+			TodoStore.statusFilter = 'active';
+		},
+
+		'/completed': function () {
+			TodoStore.statusFilter = 'completed';
+		}
+	};
+
+	var router = new Router(routes).configure({
+		notfound: function () {
+			TodoStore.statusFilter = '';
+		}
+	});
+
+	router.init();
+})(Router, TodoStore);