Merge pull request tastejs#591 from stephenplusplus/epitome-bug

Epitome Code Style + Spec Issue

labs/architecture-examples/epitome/bower.json

@@ -2,7 +2,7 @@
   "name": "todomvc-epitome",
   "version": "0.0.0",
   "dependencies": {
-    "epitome": "0.3.1",
-    "todomvc-common": "~0.1.6"
+    "todomvc-common": "~0.1.6",
+    "Epitome": "~0.3.1"
   }
 }

labs/architecture-examples/epitome/index.html

@@ -22,19 +22,21 @@ <h1>todos</h1>
 	<footer id="info">
 		<p>Double-click to edit a todo</p>
 		<p>Created by <a href="https://github.com/DimitarChristoff/">Dimitar Christoff</a></p>
-    <p>Powered by <a href="http://dimitarchristoff.github.com/Epitome">Epitome for MooTools</a></p>
+		<p>Powered by <a href="http://epitome-mvc.github.io/Epitome">Epitome for MooTools</a></p>
 		<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 	</footer>
 	<script type="text/template" id="item-template">
 		<div class="view">
-      <input class="toggle" type="checkbox" <%=completedCheckbox%>>
+			<input class="toggle" type="checkbox" <%=completedCheckbox%>>
 			<label><%-title%></label>
 			<button class="destroy"></button>
 		</div>
     <input class="edit" value="<%=title%>">
 	</script>
 	<script type="text/template" id="stats-template">
-		<span id="todo-count"><strong><%=remaining%></strong> item<% if (obj.remaining !== 1) { %>s<% } %> left</span>
+		<span id="todo-count">
+			<strong><%=remaining%></strong> item<% if (obj.remaining !== 1) { %>s<% } %> left
+		</span>
 		<ul id="filters">
 			<li>
 				<a class="selected" href="#!/">All</a>
@@ -54,7 +56,7 @@ <h1>todos</h1>
 	<!-- mootools -->
 	<script src="js/lib/mootools-yui-compressed.js"></script>
 	<!-- epitome pre-compiled -->
-	<script src="bower_components/epitome/Epitome-min.js"></script>
+	<script src="bower_components/Epitome/Epitome-min.js"></script>
 	<!-- todo app -->
 	<script src="js/models/todo-model.js"></script>
 	<script src="js/collections/todo-collection.js"></script>

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

@@ -1,17 +1,16 @@
-/*global Epitome */
 /*jshint mootools:true */
-(function( window ) {
+(function (window) {
 	'use strict';
 
 	var App = window.App;
 
-	var todos = new App.TodoCollection( null, {
+	var todos = new App.TodoCollection(null, {
 		// a consistent collection if is needed if you want to use storage for a collection
 		id: 'todos'
 	});
 
 	// populate from storage if available
-	todos.setUp( todos.retrieve() );
+	todos.setUp(todos.retrieve());
 
 	// instantiate the todo list view
 	App.todoView = new App.TodoView({
@@ -20,10 +19,10 @@
 		collection: todos,
 
 		// encapsulating element to bind to
-		element: document.id( 'todo-list' ),
+		element: document.id('todo-list'),
 
 		// template to use
-		template: document.id( 'item-template' ).get( 'text' )
+		template: document.id('item-template').get('text')
 
 	});
 
@@ -37,11 +36,11 @@
 		element: document.id('todoapp'),
 
 		// stats template from DOM
-		template: document.id( 'stats-template' ).get( 'text' ),
+		template: document.id('stats-template').get('text'),
 
-		onReady: function() {
+		onReady: function () {
 			// need to work with controller that sets the current state of filtering
-			var proxy = function() {
+			var proxy = function () {
 				App.router.showActiveFilter();
 			};
 
@@ -57,12 +56,12 @@
 			'#!/:filter': 'applyFilter'
 		},
 
-		onInit: function() {
+		onInit: function () {
 			// we want to always have a state
-			this.navigate( '#!/' );
+			this.navigate('#!/');
 		},
 
-		onApplyFilter: function( filter ) {
+		onApplyFilter: function (filter) {
 			// the filter is being used by the todo collection and view.
 			// when false, the whole collection is being passed.
 			todos.filterType = filter || false;
@@ -73,4 +72,4 @@
 			this.showActiveFilter();
 		}
 	});
-}( window ));
+})(window);

labs/architecture-examples/epitome/js/collections/todo-collection.js

@@ -1,6 +1,6 @@
 /*global Epitome, App */
 /*jshint mootools:true */
-(function(window) {
+(function (window) {
 	'use strict';
 
 	window.App = window.App || {};
@@ -21,9 +21,9 @@
 			completed: 1
 		},
 
-		todoFilter: function( model ) {
+		todoFilter: function (model) {
 			// references the filterType which the controller sets
-			return this.filterType === false ? true : this.map[this.filterType] === +model.get( 'completed' );
+			return this.filterType === false ? true : this.map[this.filterType] === +model.get('completed');
 		}
 	});
-}( window ));
+})(window);

labs/architecture-examples/epitome/js/controllers/todo-router.js

@@ -1,6 +1,6 @@
 /*global Epitome, App */
 /*jshint mootools:true */
-(function(window) {
+(function (window) {
 	'use strict';
 
 	window.App = window.App || {};
@@ -9,14 +9,14 @@
 
 		Extends: Epitome.Router,
 
-		showActiveFilter: function() {
+		showActiveFilter: function () {
 			// fix up the links for current filter
 			var self = this;
-			document.getElements( '#filters li a' ).each(function( link ) {
-				link.set( 'class', link.get( 'href' ) === self.req ? 'selected' : '' );
+			document.getElements('#filters li a').each(function (link) {
+				link.set('class', link.get('href') === self.req ? 'selected' : '');
 			});
 		}
 	});
 
 
-}( window ));
+})(window);

labs/architecture-examples/epitome/js/models/todo-model.js

@@ -1,6 +1,6 @@
 /*global Epitome, App */
 /*jshint mootools:true */
-(function(window) {
+(function (window) {
 	'use strict';
 
 	window.App = window.App || {};
@@ -28,4 +28,4 @@
 		model: App.Todo
 
 	});
-}( window ));
+})(window);

labs/architecture-examples/epitome/js/views/todo-list.js

@@ -1,6 +1,6 @@
 /*global Epitome, App */
 /*jshint mootools:true */
-(function( window ) {
+(function (window) {
 	'use strict';
 
 	window.App = window.App || {};
@@ -29,89 +29,91 @@
 			},
 
 			// define actual event handlers
-			onReady: function() {
+			onReady: function () {
 				// initial view
 				this.render();
 			},
 
 			// when collection changes, save the data to storage and re-render
-			'onChange:collection': function( model ) {
+			'onChange:collection': function () {
 				this.collection.store();
 				this.render();
 			},
 
 			// when models get removed, re-render
-			'onRemove:collection': function( model ) {
+			'onRemove:collection': function () {
 				this.collection.store();
 				this.render();
 			},
 
 			// when sort is applied, re-render
-			'onSort:collection': function() {
+			'onSort:collection': function () {
 				this.collection.store();
 				this.render();
 			},
 
 			// when a new model is added, re-render
-			'onAdd:collection': function( model ) {
+			'onAdd:collection': function () {
 				this.collection.store();
 				this.render();
 			},
 
 			// handler for the edit event
-			onEditing: function( e, el ) {
-				if ( e && e.stop ) {
+			onEditing: function (e, el) {
+				if (e && e.stop) {
 					e.stop();
 				}
 
 				var container = el.getParent('li');
-				container.addClass( this.options.editingClass );
-				container.getElement( this.options.input ).focus();
+				var input = container.getElement(this.options.input);
+
+				container.addClass(this.options.editingClass);
+				input.focus();
+				input.value = input.value;
 			},
 
 			// when enter pressed while editing
-			onHandleKeypress: function( e, el ) {
+			onHandleKeypress: function (e, el) {
 				// on enter, blur() and let it bubble to onUpdate.
-				if ( e.key === 'enter' ) {
+				if (e.key === 'enter') {
 					el.blur();
 				}
 			},
 
-
 			// fired when editing ends
-			onUpdate: function( e, el ) {
-				var p = el.getParent( 'li ').removeClass( this.options.editingClass );
-				var val = el.get( 'value' ).trim();
+			onUpdate: function (e, el) {
+				var p = el.getParent('li').removeClass(this.options.editingClass);
+				var val = el.get('value').trim();
 
-				if ( !val.length ) {
+				if (!val.length) {
 					// the render method stores the model into the element, get it and remove
-					this.collection.removeModel( p.retrieve( 'model' ) );
+					this.collection.removeModel(p.retrieve('model'));
 					return;
 				}
 
-				p.retrieve( 'model' ).set( 'title', val );
+				p.retrieve('model').set('title', val);
 			},
 
 			// handler for clicks on the checkboxes
-			onStatusChange: function( e, el ) {
-				var p = el.getParent( 'li' );
-				var done = !!el.get( 'checked' );
+			onStatusChange: function (e, el) {
+				var p = el.getParent('li');
+				var done = !!el.get('checked');
 
-				p.retrieve( 'model' ).set( 'completed', done );
+				p.retrieve('model').set('completed', done);
 			},
 
 			// when the X is pressed, drop the model
-			onRemoveItem: function( e, el ) {
-				if ( e && e.stop ) {
+			onRemoveItem: function (e, el) {
+				if (e && e.stop) {
 					e.stop();
 				}
 
 				// the render method stores the model into the element, get it and remove
-				this.collection.removeModel( el.getParent( 'li' ).retrieve( 'model' ) );
+				this.collection.removeModel(el.getParent('li').retrieve('model'));
 			}
 		},
 
-		render: function() {
+		render: function () {
 			// main render method, will also fire onRender
 			var todos = new Elements();
 			var self = this;
@@ -120,23 +122,23 @@
 			this.empty();
 
 			// the route controller works with the todoFilter to help determine what we render.
-			this.collection.filter( this.collection.todoFilter.bind( this.collection ) ).each(function( model ) {
+			this.collection.filter(this.collection.todoFilter.bind(this.collection)).each(function (model) {
 				var obj = model.toJSON();
-				var li = new Element( self.tagName ).toggleClass( 'completed', obj.completed ).store( 'model', model );
+				var li = new Element(self.tagName).toggleClass('completed', obj.completed).store('model', model);
 
 				// help the template to avoid slower logic in the template layer
 				obj.completedCheckbox = obj.completed ? 'checked' : '';
 
 				// compile template and store resulting element in our Elements collection
-				todos.push( li.set( 'html', self.template( obj ) ) );
+				todos.push(li.set('html', self.template(obj)));
 			});
 
 			// inject the elements collection into the container element
-			this.element.adopt( todos );
+			this.element.adopt(todos);
 
 			// propagate the render event.
 			this.parent();
 			return this;
 		}
 	});
-}( window ));
+})(window);