Fixing line-heights on multi-line todos

examples/todos/index.html

@@ -64,14 +64,14 @@
       <% if (total) { %>
         <span class="todo-count">
           <span class="number"><%= remaining %></span>
-          <span class="word"><%= Todos.pluralize(remaining) %></span> left.
+          <span class="word"><%= remaining == 1 ? 'item' : 'items' %></span> left.
         </span>
       <% } %>
       <% if (done) { %>
         <span class="todo-clear">
           <a href="#">
             Clear <span class="number-done"><%= done %></span>
-            completed <span class="word-done"><%= Todos.pluralize(done) %></span>
+            completed <span class="word-done"><%= done == 1 ? 'item' : 'items' %></span>
           </a>
         </span>
       <% } %>

examples/todos/todos.css

@@ -89,9 +89,10 @@ html {
   margin-top: 10px;
 }
   #todo-list li {
-    padding: 15px 20px 15px 0;
+    padding: 12px 20px 11px 0;
     position: relative;
     font-size: 24px;
+    line-height: 1.1em;
     border-bottom: 1px solid #cccccc;
   }
     #todo-list li:after {
@@ -130,7 +131,7 @@ html {
     }
   #todo-list .check {
     position: relative;
-    top: 6px;
+    top: 9px;
     margin: 0 10px 0 7px;
     float: left;
   }
@@ -140,8 +141,8 @@ html {
   }
   #todo-list .todo-destroy {
     position: absolute;
-    right: 0px;
-    top: 16px;
+    right: 5px;
+    top: 14px;
     display: none;
     cursor: pointer;
     width: 20px;

examples/todos/todos.js

@@ -23,14 +23,15 @@ $(function(){
   // server.
   window.TodoList = Backbone.Collection.extend({
 
-    model:      Todo,
+    // Reference to this collection's model.
+    model: Todo,
+
+    // Save all of the todo items under the `"todos"` namespace.
     localStore: "todos",
 
     // Filter down the list of all todo items that are finished.
     done: function() {
-      return this.filter(function(todo){
-        return todo.get('done');
-      });
+      return this.filter(function(todo){ return todo.get('done'); });
     },
 
     // We keep the Todos in sequential order, despite being saved by unordered
@@ -40,25 +41,26 @@ $(function(){
       return this.last().get('order') + 1;
     },
 
-    // Todos are sorted by their original order.
+    // Todos are sorted by their original insertion order.
     comparator: function(todo) {
       return todo.get('order');
-    },
-
-    pluralize: function(count) {
-      return count == 1 ? 'item' : 'items';
     }
 
   });
 
+  // Create our global collection of **Todos**.
   window.Todos = new TodoList;
 
+  // The view for a single Todo item...
   window.TodoView = Backbone.View.extend({
 
+    //... is a list tag.
     tagName:  "li",
 
+    // Cache the template function for a single todo.
     template: _.template($('#item-template').html()),
 
+    // The DOM events specific to a todo item.
     events: {
       "click .check"              : "toggleDone",
       "dblclick div.todo-content" : "edit",
@@ -66,32 +68,41 @@ $(function(){
       "keypress .todo-input"      : "updateOnEnter"
     },
 
+    // The TodoView 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() {
       _.bindAll(this, 'render');
       this.model.bind('change', this.render);
       this.model.view = this;
     },
 
+    // 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.$('.todo-input').val(content);
     },
 
+    // Toggle the `"done"` state of the model.
     toggleDone: function() {
       this.model.toggle();
     },
 
+    // Switch this view into `"editing"` mode, displaying the input field.
     edit: function() {
       $(this.el).addClass("editing");
     },
 
+    // If you hit enter, submit the changes to the todo item.
     updateOnEnter: function(e) {
       if (e.keyCode != 13) return;
       this.model.save({content: this.$(".todo-input").val()});
@@ -178,4 +189,4 @@ $(function(){
 
   window.App = new AppView;
 
-});
+});