Nice improvements to the rendering ... more templates, less javascript.

claudioc · Oct 25, 2010 · 3a47769 · 3a47769
1 parent 092131d
commit 3a47769
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 94 deletions.
diff --git a/Rakefile b/Rakefile
@@ -9,7 +9,7 @@ end
 
 desc "build the docco documentation"
 task :doc do
-  system "docco backbone.js"
+  system "docco backbone.js examples/todos/todos.js"
 end
 
 desc "run JavaScriptLint on the source"

diff --git a/docs/backbone.html b/docs/backbone.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>  <html> <head>   <title>backbone.js</title>   <meta http-equiv="content-type" content="text/html; charset=UTF-8">   <link rel="stylesheet" media="all" href="docco.css" /> </head> <body>   <div id="container">     <div id="background"></div>          <table cellpadding="0" cellspacing="0">       <thead>         <tr>           <th class="docs">             <h1>               backbone.js             </h1>           </th>           <th class="code">           </th>         </tr>       </thead>       <tbody>                               <tr id="section-1">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-1">&#182;</a>               </div>               <pre><code>(c) 2010 Jeremy Ashkenas, DocumentCloud Inc.
+<!DOCTYPE html>  <html> <head>   <title>backbone.js</title>   <meta http-equiv="content-type" content="text/html; charset=UTF-8">   <link rel="stylesheet" media="all" href="docco.css" /> </head> <body>   <div id="container">     <div id="background"></div>            <div id="jump_to">         Jump To &hellip;         <div id="jump_wrapper">           <div id="jump_page">                                           <a class="source" href="backbone.html">                 backbone.js               </a>                                           <a class="source" href="todos.html">                 todos.js               </a>                        </div>         </div>       </div>          <table cellpadding="0" cellspacing="0">       <thead>         <tr>           <th class="docs">             <h1>               backbone.js             </h1>           </th>           <th class="code">           </th>         </tr>       </thead>       <tbody>                               <tr id="section-1">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-1">&#182;</a>               </div>               <pre><code>(c) 2010 Jeremy Ashkenas, DocumentCloud Inc.
 Backbone may be freely distributed under the MIT license.
 For all details and documentation:
 http://documentcloud.github.com/backbone

diff --git a/docs/todos.html b/docs/todos.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>  <html> <head>   <title>todos.js</title>   <meta http-equiv="content-type" content="text/html; charset=UTF-8">   <link rel="stylesheet" media="all" href="docco.css" /> </head> <body>   <div id="container">     <div id="background"></div>          <table cellpadding="0" cellspacing="0">       <thead>         <tr>           <th class="docs">             <h1>               todos.js             </h1>           </th>           <th class="code">           </th>         </tr>       </thead>       <tbody>                               <tr id="section-1">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-1">&#182;</a>               </div>                            </td>             <td class="code">               <div class="highlight"><pre><span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span></pre></div>             </td>           </tr>                               <tr id="section-2">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-2">&#182;</a>               </div>               <p>Todo</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nb">window</span><span class="p">.</span><span class="nx">Todo</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
+<!DOCTYPE html>  <html> <head>   <title>todos.js</title>   <meta http-equiv="content-type" content="text/html; charset=UTF-8">   <link rel="stylesheet" media="all" href="docco.css" /> </head> <body>   <div id="container">     <div id="background"></div>            <div id="jump_to">         Jump To &hellip;         <div id="jump_wrapper">           <div id="jump_page">                                           <a class="source" href="backbone.html">                 backbone.js               </a>                                           <a class="source" href="todos.html">                 todos.js               </a>                        </div>         </div>       </div>          <table cellpadding="0" cellspacing="0">       <thead>         <tr>           <th class="docs">             <h1>               todos.js             </h1>           </th>           <th class="code">           </th>         </tr>       </thead>       <tbody>                               <tr id="section-1">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-1">&#182;</a>               </div>                            </td>             <td class="code">               <div class="highlight"><pre><span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span></pre></div>             </td>           </tr>                               <tr id="section-2">             <td class="docs">               <div class="pilwrap">                 <a class="pilcrow" href="#section-2">&#182;</a>               </div>               <p>Todo</p>             </td>             <td class="code">               <div class="highlight"><pre>  <span class="nb">window</span><span class="p">.</span><span class="nx">Todo</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
 
     <span class="nx">parse</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">resp</span><span class="p">)</span> <span class="p">{</span>
       <span class="k">return</span> <span class="nx">resp</span><span class="p">.</span><span class="nx">model</span><span class="p">;</span>
@@ -77,6 +77,7 @@
     <span class="nx">changed</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
       <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">==</span> <span class="mi">13</span><span class="p">)</span> <span class="p">{</span>
         <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">save</span><span class="p">({</span><span class="nx">content</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">updateInput</span><span class="p">.</span><span class="nx">val</span><span class="p">()});</span>
+        <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.todo&#39;</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">&quot;editing&quot;</span><span class="p">);</span>
       <span class="p">}</span>
     <span class="p">},</span>
 

diff --git a/examples/todos/index.html b/examples/todos/index.html
@@ -30,15 +30,7 @@ <h1>Todos</h1>
           <ul id="todo-list"></ul>
         </div>
 
-        <div id="todo-stats">
-          <span class="todo-count">
-            <span class="number">0</span>
-            <span class="word">items</span> left.
-          </span>
-          <span class="todo-clear">
-            <a href="#">Clear completed</a>
-          </span>
-        </div>
+        <div id="todo-stats"></div>
 
       </div>
 
@@ -55,10 +47,10 @@ <h1>Todos</h1>
       <a href="http://jgn.me/">J&eacute;r&ocirc;me Gravel-Niquet</a>
     </div>
 
-    <script type="text-template" id="item-template">
+    <script type="text/template" id="item-template">
       <div class="todo <%= done ? 'done' : '' %>">
         <div class="display">
-          <input type="checkbox" <%= done ? 'checked="checked"' : '' %> />
+          <input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
           <div class="todo-content"></div>
           <span class="todo-destroy"></span>
         </div>
@@ -68,6 +60,23 @@ <h1>Todos</h1>
       </div>
     </script>
 
+    <script type="text/template" id="stats-template">
+      <% if (total) { %>
+        <span class="todo-count">
+          <span class="number"><%= remaining %></span>
+          <span class="word"><%= Todos.pluralize(remaining) %></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>
+          </a>
+        </span>
+      <% } %>
+    </script>
+
   </body>
 
 </html>
diff --git a/examples/todos/todos.css b/examples/todos/todos.css
@@ -128,14 +128,14 @@ body {
   margin-top: 10px;
 }
 /* line 56 */
-#todo-list .todo {
+#todo-list li {
   padding: 15px 20px 15px 0;
   position: relative;
   font-size: 24px;
   border-bottom: 1px solid #cccccc;
 }
 
-#todoapp .content ul#todo-list .todo:after {
+#todoapp .content ul#todo-list li:after {
   content: "\0020";
   display: block;
   height: 0;
@@ -144,7 +144,7 @@ body {
   visibility: hidden;
 }
 /* line 62 */
-#todo-list .editing {
+#todo-list li.editing {
   padding: 0;
   border-bottom: 0;
 }
@@ -157,14 +157,14 @@ body {
   }
 /* line 65 */
 #todoapp .content ul#todo-list .editing input {
-  width: 466px;
+  width: 444px;
   font-size: 24px;
   font-family: inherit;
   margin: 0;
-  line-height: 1.4em;
+  line-height: 1.6em;
   border: 0;
   outline: none;
-  padding: 7px 7px 8px;
+  padding: 10px 7px 0px 27px;
   border: 1px solid #999999;
   -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
@@ -215,7 +215,6 @@ body {
 }
 /* line 102 */
 #todoapp .content #todo-stats .todo-count {
-  display: none;
   float: left;
 }
 /* line 105 */
@@ -226,7 +225,6 @@ body {
 /* line 108 */
 #todoapp .content #todo-stats .todo-clear {
   float: right;
-  display: none;
 }
 /* line 111 */
 #todoapp .content #todo-stats .todo-clear a {

diff --git a/examples/todos/todos.js b/examples/todos/todos.js
@@ -9,6 +9,11 @@ $(function(){
 
     htmlId: function() {
       return "todo-" + this.id;
+    },
+
+    remove: function() {
+      this.destroy();
+      $(this.view.el).remove();
     }
 
   });
@@ -21,7 +26,7 @@ $(function(){
 
     // Returns all done todos.
     done: function() {
-      return this.select(function(todo){
+      return this.filter(function(todo){
         return todo.get('done');
       });
     },
@@ -37,6 +42,10 @@ $(function(){
 
     parse: function(resp) {
       return resp.models;
+    },
+
+    pluralize: function(count) {
+      return count == 1 ? 'item' : 'items';
     }
 
   });
@@ -45,21 +54,22 @@ $(function(){
 
   window.TodoView = Backbone.View.extend({
 
-    tagName:    "li",
+    tagName:  "li",
 
-    template:   _.template($('#item-template').html()),
+    template: _.template($('#item-template').html()),
 
     events: {
-      "click input[type=checkbox]": "markAsDone",
+      "click .check"              : "toggleDone",
       "dblclick div.todo-content" : "edit",
-      "click span.todo-destroy"   : "destroy",
+      "click span.todo-destroy"   : "remove",
       "keypress .todo-input"      : "changed"
     },
 
     initialize: function() {
       _.bindAll(this, 'render');
       this.model.bind('change', this.render);
       this.el.id = this.model.htmlId();
+      this.model.view = this;
     },
 
     render: function() {
@@ -74,28 +84,23 @@ $(function(){
       this.$('.todo-input').val(content);
     },
 
-    markAsDone: function() {
-      this.model.save({ done: !this.model.get("done") });
+    toggleDone: function() {
+      this.model.save({done: !this.model.get("done")});
     },
 
     edit: function() {
-      this.$('.todo').addClass("editing");
-      this.updateInput = this.$("input[type=text]");
+      $(this.el).addClass("editing");
     },
 
     changed: function(e) {
       if (e.keyCode == 13) {
-        this.model.save({content: this.updateInput.val()});
+        this.model.save({content: this.$(".todo-input").val()});
+        $(this.el).removeClass("editing");
       }
     },
 
-    destroy: function() {
-      var thisView = this;
-      this.model.destroy({
-        success: function(){
-          $(thisView.el).remove();
-        }
-      });
+    remove: function() {
+      this.model.remove();
     }
 
   });
@@ -104,43 +109,38 @@ $(function(){
 
     el: $("#todoapp"),
 
+    template: _.template($('#stats-template').html()),
+
     events: {
-      "keypress input#new-todo":  "createIfEnter",
-      "keyup input#new-todo":     "showTooltip",
-      "click span.todo-clear":    "clearCompleted"
+      "keypress #new-todo":  "createIfEnter",
+      "keyup #new-todo":     "showTooltip",
+      "click .todo-clear a": "clearCompleted"
     },
 
     initialize: function() {
-      _.bindAll(this, 'addTodo', 'clearCompleted', 'showTooltip', 'createIfEnter', 'analyzeTodos');
-
-      Todos.bind('add', this.addTodo);
+      _.bindAll(this, 'addTodo', 'clearCompleted', 'showTooltip', 'createIfEnter', 'render');
 
       this.list       = $("#todo-list");
       this.newInput   = $("#new-todo");
       this.tooltip    = this.$(".ui-tooltip-top");
 
+      Todos.bind('add', this.addTodo);
+      Todos.bind('all', this.render);
+
       Todos.fetch({
         success: _.bind(function(coll) {
           _.each(coll.models, this.addTodo);
         }, this)
       });
-
-      this.analyzeTodos();
-
-      Todos.bind("add", this.analyzeTodos);
-      Todos.bind("remove", this.analyzeTodos);
-      Todos.bind("change", this.analyzeTodos);
     },
 
-    analyzeTodos: function() {
-      var doneCount = Todos.done().length;
-      var todoCount = Todos.length;
-      var totalCount = todoCount - doneCount;
-
-      this.$(".number").text(totalCount);
-      this.$(".word").text(totalCount == 1 ? 'item' : 'items');
-      this.$("span.todo-count").css({display: todoCount > 0 ? "inline" : "none"});
-      this.$("span.todo-clear").css({display: doneCount > 0 ? "inline" : "none"});
+    render: function() {
+      var done = Todos.done().length;
+      this.$('#todo-stats').html(this.template({
+        done:       done,
+        total:      Todos.length,
+        remaining:  Todos.length - done
+      }));
     },
 
     addTodo: function(todo) {
@@ -174,12 +174,8 @@ $(function(){
     },
 
     clearCompleted: function() {
-      thisView = this;
-      _.each(Todos.done(), function(todo){
-        todo.destroy({success: function(todo){
-          thisView.$("#todo-"+todo.id).remove();
-        }});
-      });
+      _.each(Todos.done(), function(todo){ todo.remove(); });
+      return false;
     }
 
   });