Use this.$el, model.destroy() and change application behavior on add and complete todo.

dependency-examples/backbone_require/js/models/todo.js

@@ -4,31 +4,18 @@ define([
 ], function( _, Backbone ) {
 
 	var TodoModel = Backbone.Model.extend({
-		// Default attributes for the todo.
+		// Default attributes for the todo
+		// and ensure that each todo created has `title` and `completed` keys.
 		defaults: {
 			title: '',
 			completed: false
 		},
 
-		// Ensure that each todo created has `title`.
-		initialize: function() {
-			if ( !this.get('title') ) {
-				this.set({
-					'title': this.defaults.title
-				});
-			}
-		},
-
 		// Toggle the `completed` state of this todo item.
 		toggle: function() {
 			this.save({
 				completed: !this.get('completed')
 			});
-		},
-
-		// Remove this Todo from *localStorage* and delete its view.
-		clear: function() {
-			this.destroy();
 		}
 	});
 

dependency-examples/backbone_require/js/views/app.js

@@ -12,7 +12,7 @@ define([
 
 		// Instead of generating a new element, bind to the existing skeleton of
 		// the App already present in the HTML.
-		el: $('#todoapp'),
+		el: '#todoapp',
 
 		// Compile our stats template
 		template: _.template( statsTemplate ),
@@ -30,11 +30,12 @@ define([
 		initialize: function() {
 			this.input = this.$('#new-todo');
 			this.allCheckbox = this.$('#toggle-all')[0];
-			this.$footer = $('#footer');
-			this.$main = $('#main');
+			this.$footer = this.$('#footer');
+			this.$main = this.$('#main');
 
-			Todos.on( 'add', this.addOne, this );
+			Todos.on( 'add', this.addAll, this );
 			Todos.on( 'reset', this.addAll, this );
+			Todos.on( 'change:completed', this.addAll, this );
 			Todos.on( 'all', this.render, this );
 			Todos.fetch();
 		},
@@ -113,7 +114,7 @@ define([
 		// Clear all completed todo items, destroying their models.
 		clearCompleted: function() {
 			_.each( Todos.completed(), function( todo ) {
-				todo.clear();
+				todo.destroy();
 			});
 
 			return false;

dependency-examples/backbone_require/js/views/todos.js

@@ -31,10 +31,8 @@ define([
 
 		// Re-render the titles of the todo item.
 		render: function() {
-			var $el = $( this.el );
-
-			$el.html( this.template( this.model.toJSON() ) );
-			$el.toggleClass( 'completed', this.model.get('completed') );
+			this.$el.html( this.template( this.model.toJSON() ) );
+			this.$el.toggleClass( 'completed', this.model.get('completed') );
 
 			this.input = this.$('.edit');
 			return this;
@@ -47,7 +45,7 @@ define([
 
 		// Switch this view into `"editing"` mode, displaying the input field.
 		edit: function() {
-			$( this.el ).addClass('editing');
+			this.$el.addClass('editing');
 			this.input.focus();
 		},
 
@@ -61,7 +59,7 @@ define([
 				this.clear();
 			}
 
-			$( this.el ).removeClass('editing');
+			this.$el.removeClass('editing');
 		},
 
 		// If you hit `enter`, we're through editing the item.
@@ -71,9 +69,9 @@ define([
 			}
 		},
 
-		// Remove the item, destroy the model.
+		// Remove the item, destroy the model from *localStorage* and delete its view.
 		clear: function() {
-			this.model.clear();
+			this.model.destroy();
 		}
 	});