var app = app || {};

// The DOM element for a todo item...
app.TodoView = Backbone.View.extend({ 

  //... is a list tag.
  tagName: 'li',

  // Cache the template function for a single item.
  template: _.template( $('#item-template').html() ),

  // The DOM events specific to an item.
  events: {
    'dblclick label': 'edit',
    'keypress .edit': 'updateOnEnter',
    'blur .edit': 'close'
  },

  // The TodoView listens for changes to its model, rerendering. Since there's // a one-to-one correspondence between a **Todo** and a **TodoView** in this // app, we set a direct reference on the model for convenience.
  
  initialize: function() {
    this.listenTo(this.model, 'change', this.render); 
  },
  
  // Rerenders the titles of the todo item.
  // Note that the model passed in the arguments hash by our AppView is automatically available to us as this.model.
  render: function() {
    this.$el.html( 
      this.template( 
        this.model.toJSON() 
      ) 
    );
    this.$input = this.$('.edit');
  
    return this;
  },

  // Switch this view into `"editing"` mode, displaying the input field.
  edit: function() { 
    this.$el.addClass('editing'); 
    this.$input.focus();
  },
    
  // Close the `"editing"` mode, saving changes to the todo.
  close: function() {
    var value = this.$input.val().trim();
    
    if ( value ) {
      this.model.save({ title: value });
    }

    this.$el.removeClass('editing'); 
  },
  
  // If you hit `enter`, we're through editing the item.
  updateOnEnter: function( e ) { 
    if ( e.which === ENTER_KEY ) {
      this.close(); 
    }
  }

});
@@ -294,16 +294,87 @@
 ents: %7B%0A
+    'click .toggle': 'togglecompleted',%0A    'click .destroy': 'clear',%0A
     'dbl
@@ -395,16 +395,16 @@
 'edit',%0A
-
     'key
@@ -769,17 +769,133 @@
 render);
- 
+%0A    this.listenTo(this.model, 'destroy', this.remove);%0A    this.listenTo(this.model, 'visible', this.toggleVisible);
 %0A  %7D,%0A  
@@ -1165,16 +1165,120 @@
  %0A    );
+%0A%0A    this.$el.toggleClass( 'completed', this.model.get('completed') ); // NEW%0A    this.toggleVisible();
 %0A    thi
@@ -1491,16 +1491,350 @@
 );%0A  %7D,%0A
+%0A  toggleVisible : function () %7B%0A    this.$el.toggleClass( 'hidden', this.isHidden());%0A  %7D,%0A%0A  isHidden : function () %7B%0A    var isCompleted = this.model.get('completed');%0A    return ( // hidden cases only%0A      (!isCompleted && app.TodoFilter === 'completed')%0A      %7C%7C %0A      (isCompleted && app.TodoFilter === 'active')%0A    );%0A  %7D,%0A%0A
     %0A  /
@@ -2025,16 +2025,49 @@
 );%0A    %7D
+ else %7B%0A      this.clear();%0A    %7D
 %0A%0A    th
@@ -2253,22 +2253,139 @@
 ose(); %0A
-
     %7D%0A
+  %7D,%0A%0A  clear: function() %7B%0A    this.model.destroy();%0A  %7D,%0A%0A  togglecompleted: function() %7B%0A    this.model.toggle();%0A
   %7D%0A%0A%7D);

delete and toggle todo item functions