Use the normal event bindings to perform the close/blur event. Set content...

Use the normal event bindings to perform the close/blur event.  Set content directly in the template.

todo-example/backbone/index.html

@@ -52,11 +52,11 @@
       <div class="todo <%= done ? 'done' : '' %>">
         <div class="display">
           <input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
-          <div class="todo-content"></div>
+          <div class="todo-content"><%= content %></div>
           <span class="todo-destroy"></span>
         </div>
         <div class="edit">
-          <input class="todo-input" type="text" value="" />
+          <input class="todo-input" type="text" value="<%= content %>" />
         </div>
       </div>
     </script>

todo-example/backbone/js/todos.js

@@ -94,7 +94,8 @@ $(function(){
       "click .check"              : "toggleDone",
       "dblclick div.todo-content" : "edit",
       "click span.todo-destroy"   : "clear",
-      "keypress .todo-input"      : "updateOnEnter"
+      "keypress .todo-input"      : "updateOnEnter",
+      "blur .todo-input"          : "close"
     },
 
     // The TodoView listens for changes to its model, re-rendering. Since there's
@@ -109,18 +110,8 @@ $(function(){
     // Re-render the contents of the todo item.
     render: function() {
       $(this.el).html(this.template(this.model.toJSON()));
-      this.setContent();
-      return this;
-    },
-
-    // To avoid XSS (not that it would be harmful in this particular app),
-    // we use `jQuery.text` to set the contents of the todo item.
-    setContent: function() {
-      var content = this.model.get('content');
-      this.$('.todo-content').text(content);
       this.input = this.$('.todo-input');
-      this.input.bind('blur', this.close);
-      this.input.val(content);
+      return this;
     },
 
     // Toggle the `"done"` state of the model.