Followup to #655

labs/architecture-examples/ractive/css/app.css

@@ -6,6 +6,5 @@ label {
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	-ms-user-select: none;
-	-o-user-select: none;
 	user-select: none;
-}
\ No newline at end of file
+}

labs/architecture-examples/ractive/index.html

@@ -11,7 +11,6 @@
 		<section id="todoapp"></section>
 		<footer id="info">
 			<p>Double-click to edit a todo</p>
-
 			<p>Created by <a href="http://rich-harris.co.uk">Rich Harris</a></p>
 			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 		</footer>
@@ -21,19 +20,16 @@
 			<header id="header">
 				<h1>todos</h1>
 
-				<!-- In app.js, we define a custom `enter` event, which fires when the user
-				     hits the enter key, submitting a new todo -->
+				<!-- In app.js, we define a custom `enter` event, which fires when the user hits the enter key, submitting a new todo. -->
 				<input id="new-todo" on-enter="newTodo" placeholder="What needs to be done?" autofocus>
 			</header>
 
-			<!-- We only render the main section and the footer if we have one or more todos -
-			     in other words, `items.length` is not falsy -->
+			<!--
+			We only render the main section and the footer if we have one or more todos - in other words, `items.length` is not falsy.
+			-->
 			{{#items.length}}
 				<section id="main">
-					<!-- Here, we compare the total number of tasks (`items.length`) with the number of
-					     completed tasks (`completedTasks().length`). This calculation happens reactively,
-					     so we never need to manually trigger an update. When the `change` event fires
-					     on the input, the `toggleAll` event fires on the Ractive instance. -->
+					<!-- Here, we compare the total number of tasks (`items.length`) with the number of completed tasks (`completedTasks().length`). This calculation happens reactively, so we never need to manually trigger an update. When the `change` event fires on the input, the `toggleAll` event fires on the Ractive instance. -->
 					<input id="toggle-all" type="checkbox" on-change="toggleAll" checked='{{ items.length === completedTasks().length }}'>
 					<label for="toggle-all">Mark all as complete</label>
 
@@ -75,10 +71,8 @@
 		</script>
 
 		<script id="item" type="text/ractive">
-			<!-- This is the {{>item}} partial. It is rendered for each task in the array
-			     (`this` corresponds to the current task). But we only want to actually show
-			     those tasks that pass the current filter. -->
-			{{# filter( this ) }}
+			<!-- This is the {{>item}} partial. It is rendered for each task in the array (`this` corresponds to the current task). But we only want to actually show those tasks that pass the current filter. -->
+			{{# filter(this) }}
 				<li class="{{ completed ? 'completed' : '' }} {{ editing ? 'editing' : '' }}">
 					<div class="view">
 						<input class="toggle" type="checkbox" checked="{{completed}}">
@@ -88,8 +82,7 @@
 
 					<!-- This section only exists in the DOM when editing is taking place -->
 					{{#.editing}}
-						<!-- Here, we use custom events (`enter`) alongside standard DOM events
-						     (`blur`) to handle user interaction -->
+						<!-- Here, we use custom events (`enter`) alongside standard DOM events (`blur`) to handle user interaction -->
 						<input id="edit" class="edit" on-blur-enter="submit" on-escape="cancel" autofocus>
 					{{/.editing}}
 				</li>

labs/architecture-examples/ractive/js/app.js

 /*global window, Ractive */
-
 (function (window, Ractive) {
-
 	'use strict';
 
 	// Create some filter functions, which we'll need later
 	var filters = {
-		completed: function (item) { return  item.completed; },
-		active:    function (item) { return !item.completed; }
+		completed: function (item) { return item.completed; },
+		active: function (item) { return !item.completed; }
 	};
 
 	// The keycode for the 'enter' and 'escape' keys
-	var ENTER_KEY = 13, ESCAPE_KEY = 27;
+	var ENTER_KEY = 13;
+	var ESCAPE_KEY = 27;
 
 	// Create our Ractive instance
 	var todoList = new Ractive({
-
 		// Specify a target element - an ID, a CSS selector, or the element itself
 		el: 'todoapp',
 
@@ -167,4 +165,4 @@
 
 	window.todoList = todoList;
 
-})(window, Ractive);
\ No newline at end of file
+})(window, Ractive);

labs/architecture-examples/ractive/js/persistence.js

 /*global window, todoList */
-
 (function (window, todoList) {
-
 	'use strict';
 
 	// In Ractive, 'models' are usually just POJOs - plain old JavaScript objects.
@@ -34,16 +32,14 @@
 		// Whenever the model changes (including child properties like
 		// `items[1].completed`)...
 		todoList.observe('items', function (items) {
-			
+
 			// ...we persist it to localStorage
 			localStorage.setItem('todos-ractive', JSON.stringify(items.map(removeEditingState)));
 		});
-	}
-
-	else {
+	} else {
 		items = [];
 	}
 
 	todoList.set('items', items);
 
-}(window, todoList));
\ No newline at end of file
+})(window, todoList);

labs/architecture-examples/ractive/js/routes.js

 /*global window, Router, todoList */
-
 (function (window, Router, todoList) {
-
 	'use strict';
 
 	// We're using https://github.com/flatiron/director for routing
@@ -24,4 +22,4 @@
 
 	router.init();
 
-}(window, Router, todoList));
\ No newline at end of file
+})(window, Router, todoList);

labs/architecture-examples/ractive/readme.md

-# Ractive.js TodoMVC Example
+# Ractive.js TodoMVC app
 
 > Ractive.js solves some of the biggest headaches in web development – data binding, efficient DOM updates, event handling – and does so with almost no learning curve.
 
@@ -24,6 +24,7 @@ This is because Ractive is optimised for developer sanity (as well as performanc
 
 It has a number of innovative features: animations, easier event handling, declarative transitions, first-class SVG support, logical expressions in templates with sophisticated dependency tracking. For many developers, it hits the sweet spot between the flexibility of a library like Backbone and the power of a framework like Angular.
 
+
 ## Credit
 
 This TodoMVC application was created by [Rich Harris](http://rich-harris.co.uk).