text: // Todo Item View
  (function(window, app, $){
      'use strict';
  
      app.add('Todo', Monaco.View.extend({
          //... is a list tag.
          tagName:  'li',
  
          // Cache the template function for a single item.
          template: _.template($('#item-template').html()),
  
          // The Todo View listens for changes to its model, re-rendering. 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);
              this.listenTo(this.model, 'destroy', this.remove);
              this.listenTo(this.model, 'visible', this.toggleVisible);
          },
  
          // Re-render the titles of the todo item.
          render: function () {
              this.$el.html(this.template(this.model.toJSON()));
              this.$el.toggleClass('completed', this.model.get('completed'));
              this.toggleVisible();
              this.$input = this.$('.edit');
              return this;
          },
  
          // The DOM events specific to an item.
          events: {
              'click .toggle': 'toggleCompleted',
              'dblclick label': 'edit',
              'click .destroy': 'clear',
              'keypress .edit': 'updateOnEnter',
              'blur .edit': 'close'
          },
  
          toggleVisible: function () {
              this.$el.toggleClass('hidden', this.isHidden());
          },
  
          isHidden: function () {
              var isCompleted = this.model.get('completed');
              return (// hidden cases only
                  (!isCompleted && app.get('filter') === 'completed') ||
                  (isCompleted && app.get('filter') === 'active')
              );
          },
  
          // Toggle the `"completed"` state of the model.
          toggleCompleted: function () {
              this.model.toggle();
          },
  
          // 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 trimmedValue = this.$input.val().trim();
              this.$input.val(trimmedValue);
  
              if (trimmedValue) {
                  this.model.save({ title: trimmedValue });
              } else {
                  this.clear();
              }
  
              this.$el.removeClass('editing');
          },
  
          // If you hit `enter`, we're through editing the item.
          updateOnEnter: function (e) {
              if (e.which === ENTER_KEY) {
                  this.close();
              }
          },
  
          // Remove the item, destroy the model from *localStorage* and delete its view.
          clear: function () {
              this.model.destroy();
          }
      }));
  
  }(window, window.app, jQuery));
  