editable on dblclick

application.css

#todo-list li.editing {
	border-bottom: none;
	padding: 0;
}

#todo-list li.editing .edit {
	display: block;
	width: 506px;
	padding: 13px 17px 12px 17px;
	margin: 0 0 0 43px;
}

#todo-list li.editing .view {
	display: none;
}

#todo-list li .edit {
	display: none;
}

todo-item.html

<div class="view">
  <input class="toggle" type="checkbox" />
  <label><%- content %></label>
  <button class="destroy"></button>
</div>
<input class="edit" value="<%- content %>" />

todo-item.js

var _ = require('underscore')
  , Backbone = require('backbone.js');

var TodoItem = module.exports = Backbone.View.extend({

  tagName: 'li',

  events: {
    'dblclick label': 'edit',
    'blur .edit': 'close'
  },

  render: function() {
    this.$el.append(this.template(this.model.toJSON()));

    return this;
  },

  edit: function() {
    this.$el.addClass('editing');
    this.$('.edit').focus();
  },

  close: function() {
    this.model.save();
    this.$el.removeClass('editing');
  },

  template: _.template(require('../templates/todo-item.js'))

});