[Pkg-javascript-commits] [backbone] 18/74: Building the annotated source.
Jonas Smedegaard
js at moszumanska.debian.org
Sat May 3 16:59:05 UTC 2014
This is an automated email from the git hooks/post-receive script.
js pushed a commit to tag 0.3.0
in repository backbone.
commit 0ddef3b6da2e0ef230a47c1fbb59574685f1a92f
Author: Jeremy Ashkenas <jashkenas at gmail.com>
Date: Mon Oct 25 17:39:11 2010 -0400
Building the annotated source.
---
docs/todos.html | 249 +++++++++++++++++-----------------------------
examples/todos/index.html | 4 +
examples/todos/todos.js | 101 ++++++++++++++-----
3 files changed, 172 insertions(+), 182 deletions(-)
diff --git a/docs/todos.html b/docs/todos.html
index 970d3de..84afb14 100644
--- a/docs/todos.html
+++ b/docs/todos.html
@@ -1,182 +1,119 @@
-<!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 … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backbone.html"> backbone.js [...]
+<!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 … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backbone.html"> backbone.js [...]
- <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>
- <span class="p">},</span>
-
- <span class="nx">htmlId</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
- <span class="k">return</span> <span class="s2">"todo-"</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">id</span><span class="p">;</span>
+ <span class="nx">EMPTY</span><span class="o">:</span> <span class="s2">"empty todo..."</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>Ensure that each todo is created with the <code>content</code> field filled in, if
+nothing has been specified.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+ <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"content"</span><span class="p">))</span> <span class="p">{</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">set</span><span class="p">({</span><span class="s2">"content"</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">EMPTY</span><span class="p">});</span>
+ <span class="p">}</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>Toggle the <code>done</code> state of this todo item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggle</span><span class="o"> [...]
+ <span class="k">this</span><span class="p">.</span><span class="nx">save</span><span class="p">({</span><span class="nx">done</span><span class="o">:</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"done"</span><span class="p">)});</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>Remove this Todo from <em>localStorage</em>, deleting its view.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">clear</span><span c [...]
+ <span class="k">this</span><span class="p">.</span><span class="nx">destroy</span><span class="p">();</span>
+ <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span>
<span class="p">}</span>
- <span class="p">});</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Todo List</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span class="p">.</span><span class="nx">TodoList</span> <span [...]
-
- <span class="nx">model</span><span class="o">:</span> <span class="nx">Todo</span><span class="p">,</span>
- <span class="nx">localStore</span><span class="o">:</span> <span class="k">new</span> <span class="nx">Store</span><span class="p">(</span><span class="s2">"tasks"</span><span class="p">),</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>Returns all done t [...]
- <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">todo</span><span class="p">){</span>
- <span class="k">return</span> <span class="nx">todo</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'done'</span><span class="p">);</span>
- <span class="p">});</span>
- <span class="p">},</span>
-
- <span class="nx">nextOrder</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <h2>Todo Collection</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="se [...]
+server.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span class="p">.</span><span class="nx">TodoList</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span></pre></div> </td> </tr> <tr id="section-10"> [...]
+ <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">todo</span><span class="p">){</span> <span class="k">return</span> <span class="nx">todo</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'done'</span><span class="p">);</span> <span class="p">});</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>Filter down the list to only todo items that are still not finished.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">remaining</s [...]
+ <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">without</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">done</span><span class="p">());</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>We keep the Todos in sequential order, despite being saved by unordered
+GUID in the database. This generates the next order number for new items.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">nextOrder</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="k">return</span> <span class="mi">1</span><span class="p">;</span>
<span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">last</span><span class="p">().</span><span class="nx">get</span><span class="p">(</span><span class="s1">'order'</span><span class="p">)</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span>
- <span class="p">},</span>
-
- <span class="nx">comparator</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">todo</span><span class="p">)</span> <span class="p">{</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>Todos are sorted by their original insertion order.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">comparator</span><span class= [...]
<span class="k">return</span> <span class="nx">todo</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'order'</span><span class="p">);</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">models</span><span class="p">;</span>
<span class="p">}</span>
- <span class="p">});</span>
-
- <span class="nb">window</span><span class="p">.</span><span class="nx">Todos</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">TodoList</span><span class="p">;</span>
-
- <span class="nb">window</span><span class="p">.</span><span class="nx">TodoView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
-
- <span class="nx">tagName</span><span class="o">:</span> <span class="s2">"li"</span><span class="p">,</span>
-
- <span class="nx">template</span><span class="o">:</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">'#item-template'</span><span class="p">).</span><span class="nx">html</span><span class="p">()),</span>
-
- <span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
- <span class="s2">"click input[type=checkbox]"</span><span class="o">:</span> <span class="s2">"markAsDone"</span><span class="p">,</span>
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>Create our global collection of <strong>Todos</strong>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span class="p" [...]
+ <span class="s2">"click .check"</span> <span class="o">:</span> <span class="s2">"toggleDone"</span><span class="p">,</span>
<span class="s2">"dblclick div.todo-content"</span> <span class="o">:</span> <span class="s2">"edit"</span><span class="p">,</span>
- <span class="s2">"click span.todo-destroy"</span> <span class="o">:</span> <span class="s2">"destroy"</span><span class="p">,</span>
- <span class="s2">"keypress .todo-input"</span> <span class="o">:</span> <span class="s2">"changed"</span>
- <span class="p">},</span>
-
- <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+ <span class="s2">"click span.todo-destroy"</span> <span class="o">:</span> <span class="s2">"clear"</span><span class="p">,</span>
+ <span class="s2">"keypress .todo-input"</span> <span class="o">:</span> <span class="s2">"updateOnEnter"</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <p>The TodoView listens for changes to its model, re-rendering. Since there's
+a one-to-one correspondence between a <strong>Todo</strong> and a <strong>TodoView</strong> in this
+app, we set a direct reference on the model for convenience.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'render'</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">bind</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">htmlId</span><span class="p">();</span>
- <span class="p">},</span>
-
- <span class="nx">render</span><span class="o">:</span> <span class="kd">function</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">view</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> <p>Re-render the contents of the todo item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span><span class="o">:</span> <s [...]
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</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">toJSON</span><span class="p">()));</span>
<span class="k">this</span><span class="p">.</span><span class="nx">setContent</span><span class="p">();</span>
<span class="k">return</span> <span class="k">this</span><span class="p">;</span>
- <span class="p">},</span>
-
- <span class="nx">setContent</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</a> </div> <p>To avoid XSS (not that it would be harmful in this particular app),
+we use <code>jQuery.text</code> to set the contents of the todo item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">setContent</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">content</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'content'</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">'.todo-content'</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">content</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">'.todo-input'</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="nx">content</span><span class="p">);</span>
- <span class="p">},</span>
-
- <span class="nx">markAsDone</span><span class="o">:</span> <span class="kd">function</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">done</span><span class="o">:</span> <span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"done"</span><span class="p">)</span> <span class="p">});</span>
- <span class="p">},</span>
-
- <span class="nx">edit</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</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">'.todo'</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">"editing"</span><span class="p">);</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">updateInput</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">"input[type=text]"</span><span class="p">);</span>
- <span class="p">},</span>
-
- <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">'.todo'</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"editing"</span><span class="p">);</span>
- <span class="p">}</span>
- <span class="p">},</span>
-
- <span class="nx">destroy</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
- <span class="kd">var</span> <span class="nx">thisView</span> <span class="o">=</span> <span class="k">this</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">destroy</span><span class="p">({</span>
- <span class="nx">success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
- <span class="nx">$</span><span class="p">(</span><span class="nx">thisView</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span>
- <span class="p">}</span>
- <span class="p">});</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</a> </div> <p>Toggle the <code>"done"</code> state of the model.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">toggleDone</span><span class=" [...]
+ <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">toggle</span><span class="p">();</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</a> </div> <p>Switch this view into <code>"editing"</code> mode, displaying the input field.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">ed [...]
+ <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">"editing"</span><span class="p">);</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</a> </div> <p>If you hit enter, submit the changes to the todo item's <code>content</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">upd [...]
+ <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="k">return</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">$</span><span class="p">(</span><span class="s2">".todo-input"</span><span class="p">).</span><span class="nx">val</span><span class="p">()});</span>
+ <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">el</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"editing"</span><span class="p">);</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">¶</a> </div> <p>Remove the item, destroy the model.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">clear</span><span class="o">:</span> <span cl [...]
+ <span class="k">this</span><span class="p">.</span><span class="nx">model</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span>
<span class="p">}</span>
- <span class="p">});</span>
-
- <span class="nb">window</span><span class="p">.</span><span class="nx">AppView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
-
- <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#todoapp"</span><span class="p">),</span>
-
- <span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
- <span class="s2">"keypress input#new-todo"</span><span class="o">:</span> <span class="s2">"createIfEnter"</span><span class="p">,</span>
- <span class="s2">"keyup input#new-todo"</span><span class="o">:</span> <span class="s2">"showTooltip"</span><span class="p">,</span>
- <span class="s2">"click span.todo-clear"</span><span class="o">:</span> <span class="s2">"clearCompleted"</span>
- <span class="p">},</span>
-
- <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
- <span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'addTodo'</span><span class="p">,</span> <span class="s1">'clearCompleted'</span><span class="p">,</span> <span class="s1">'showTooltip'</span><span class="p">,</span> <span class="s1">'createIfEnter'</span><span class="p">,</span> <span class="s1">'analyzeTodos'</span><sp [...]
-
- <span class="nx">Todos</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">addTodo</span><span class="p">);</span>
-
- <span class="k">this</span><span class="p">.</span><span class="nx">list</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#todo-list"</span><span class="p">);</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">newInput</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#new-todo"</span><span class="p">);</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">tooltip</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">".ui-tooltip-top"</span><span class="p">);</span>
-
- <span class="nx">Todos</span><span class="p">.</span><span class="nx">fetch</span><span class="p">({</span>
- <span class="nx">success</span><span class="o">:</span> <span class="nx">_</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">coll</span><span class="p">)</span> <span class="p">{</span>
- <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">coll</span><span class="p">.</span><span class="nx">models</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">addTodo</span><span class="p">);</span>
- <span class="p">},</span> <span class="k">this</span><span class="p">)</span>
- <span class="p">});</span>
-
- <span class="k">this</span><span class="p">.</span><span class="nx">analyzeTodos</span><span class="p">();</span>
-
- <span class="nx">Todos</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"add"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">analyzeTodos</span><span class="p">);</span>
- <span class="nx">Todos</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"remove"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">analyzeTodos</span><span class="p">);</span>
- <span class="nx">Todos</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"change"</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">analyzeTodos</span><span class="p">);</span>
- <span class="p">},</span>
-
- <span class="nx">analyzeTodos</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
- <span class="kd">var</span> <span class="nx">doneCount</span> <span class="o">=</span> <span class="nx">Todos</span><span class="p">.</span><span class="nx">done</span><span class="p">().</span><span class="nx">length</span><span class="p">;</span>
- <span class="kd">var</span> <span class="nx">todoCount</span> <span class="o">=</span> <span class="nx">Todos</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
- <span class="kd">var</span> <span class="nx">totalCount</span> <span class="o">=</span> <span class="nx">todoCount</span> <span class="o">-</span> <span class="nx">doneCount</span><span class="p">;</span>
-
- <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">".number"</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">totalCount</span><span class="p">);</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">".word"</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span><span class="nx">totalCount</span> <span class="o">==</span> <span class="mi">1</span> <span class="o">?</span> <span class="s1">'item'</span> <span class="o">:</span> <span class="s1">'items'</span><span class="p">);</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">"span.todo-count"</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="nx">display</span><span class="o">:</span> <span class="nx">todoCount</span> <span class="o">></span> <span class="mi">0</span> <span class="o">?</span> <span class="s2">"inline"</span> <span class="o">:</span> <span class="s2">&quo [...]
- <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">"span.todo-clear"</span><span class="p">).</span><span class="nx">css</span><span class="p">({</span><span class="nx">display</span><span class="o">:</span> <span class="nx">doneCount</span> <span class="o">></span> <span class="mi">0</span> <span class="o">?</span> <span class="s2">"inline"</span> <span class="o">:</span> <span class="s2">&quo [...]
- <span class="p">},</span>
-
- <span class="nx">addTodo</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">todo</span><span class="p">)</span> <span class="p">{</span>
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">¶</a> </div> <h2>The Application</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id=" [...]
+the App already present in the HTML.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"#todoapp"</span><span class="p">),</span></pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class [...]
+ <span class="s2">"keypress #new-todo"</span><span class="o">:</span> <span class="s2">"createOnEnter"</span><span class="p">,</span>
+ <span class="s2">"keyup #new-todo"</span><span class="o">:</span> <span class="s2">"showTooltip"</span><span class="p">,</span>
+ <span class="s2">"click .todo-clear a"</span><span class="o">:</span> <span class="s2">"clearCompleted"</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">¶</a> </div> <p>At initialization we bind to the relevant events on the <code>Todos</code>
+collection, when items are added or changed. Kick things off by
+loading any preexisting todos that might be saved in <em>localStorage</em>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+ <span class="nx">_</span><span class="p">.</span><span class="nx">bindAll</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="s1">'addOne'</span><span class="p">,</span> <span class="s1">'addAll'</span><span class="p">,</span> <span class="s1">'render'</span><span class="p">);</span>
+
+ <span class="k">this</span><span class="p">.</span><span class="nx">input</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">"#new-todo"</span><span class="p">);</span>
+
+ <span class="nx">Todos</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">addOne</span><span class="p">);</span>
+ <span class="nx">Todos</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'refresh'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">addAll</span><span class="p">);</span>
+ <span class="nx">Todos</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'all'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">);</span>
+
+ <span class="nx">Todos</span><span class="p">.</span><span class="nx">fetch</span><span class="p">();</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">¶</a> </div> <p>Re-rendering the App just means refreshing the statistics -- the rest
+of the app doesn't change.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">render</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
+ <span class="kd">var</span> <span class="nx">done</span> <span class="o">=</span> <span class="nx">Todos</span><span class="p">.</span><span class="nx">done</span><span class="p">().</span><span class="nx">length</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">'#todo-stats'</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">template</span><span class="p">({</span>
+ <span class="nx">total</span><span class="o">:</span> <span class="nx">Todos</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
+ <span class="nx">done</span><span class="o">:</span> <span class="nx">Todos</span><span class="p">.</span><span class="nx">done</span><span class="p">().</span><span class="nx">length</span><span class="p">,</span>
+ <span class="nx">remaining</span><span class="o">:</span> <span class="nx">Todos</span><span class="p">.</span><span class="nx">remaining</span><span class="p">().</span><span class="nx">length</span>
+ <span class="p">}));</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">¶</a> </div> <p>Add a single todo item to the list by creating a view for it, and
+appending its element to the <code><ul></code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addOne</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">todo</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">TodoView</span><span class="p">({</span><span class="nx">model</span><span class="o">:</span> <span class="nx">todo</span><span class="p">});</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">render</span><span class="p">().</span><span class="nx">el</span><span class="p">);</span>
- <span class="p">},</span>
-
- <span class="nx">createIfEnter</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="nx">Todos</span><span class="p">.</span><span class="nx">create</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">newInput</span><span class="p">.</span><span class="nx">val</span><span class="p">(),</span>
- <span class="nx">order</span><span class="o">:</span> <span class="nx">Todos</span><span class="p">.</span><span class="nx">nextOrder</span><span class="p">(),</span>
- <span class="nx">done</span><span class="o">:</span> <span class="kc">false</span>
- <span class="p">});</span>
- <span class="k">this</span><span class="p">.</span><span class="nx">newInput</span><span class="p">.</span><span class="nx">val</span><span class="p">(</span><span class="s1">''</span><span class="p">);</span>
- <span class="p">}</span>
- <span class="p">},</span>
-
- <span class="nx">showTooltip</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">this</span><span class="p">.</span><span class="nx">tooltip</span><span class="p">.</span><span class="nx">fadeOut</span><span class="p">();</span>
-
+ <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">"#todo-list"</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">view</span><span class="p">.</span><span class="nx">render</span><span class="p">().</span><span class="nx">el</span><span class="p">);</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">¶</a> </div> <p>Add all items in the <strong>Todos</strong> collection at once.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addAll</span><spa [...]
+ <span class="nx">Todos</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">addOne</span><span class="p">);</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-38"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-38">¶</a> </div> <p>Generate the attributes for a new Todo item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">newAttributes</span><span class="o"> [...]
+ <span class="k">return</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">input</span><span class="p">.</span><span class="nx">val</span><span class="p">(),</span>
+ <span class="nx">order</span><span class="o">:</span> <span class="nx">Todos</span><span class="p">.</span><span class="nx">nextOrder</span><span class="p">(),</span>
+ <span class="nx">done</span><span class="o">:</span> <span class="kc">false</span>
+ <span class="p">};</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-39"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39">¶</a> </div> <p>If you hit return in the main input field, create new <strong>Todo</strong> model,
+persisting it to <em>localStorage</em>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">createOnEnter</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="k">return</span><span class="p">;</span>
+ <span class="nx">Todos</span><span class="p">.</span><span class="nx">create</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">newAttributes</span><span class="p">());</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">val</span><span class="p">(</span><span class="s1">''</span><span class="p">);</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-40"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40">¶</a> </div> <p>Clear all done todo items, destroying their models.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">clearCompleted</span><span cl [...]
+ <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">Todos</span><span class="p">.</span><span class="nx">done</span><span class="p">(),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">todo</span><span class="p">){</span> <span class="nx">todo</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span> <span class="p">});</span>
+ <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
+ <span class="p">},</span></pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">¶</a> </div> <p>Lazily show the tooltip that tells you to press <code>enter</code> to save
+a new todo item, after one second.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">showTooltip</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="kd">var</span> <span class="nx">tooltip</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">".ui-tooltip-top"</span><span class="p">);</span>
+ <span class="kd">var</span> <span class="nx">val</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">val</span><span class="p">();</span>
+ <span class="nx">tooltip</span><span class="p">.</span><span class="nx">fadeOut</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">tooltipTimeout</span><span class="p">)</span> <span class="nx">clearTimeout</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">tooltipTimeout</span><span class="p">);</span>
-
- <span class="kd">var</span> <span class="nx">tt</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">tooltip</span><span class="p">;</span>
-
- <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">newInput</span><span class="p">.</span><span class="nx">val</span><span class="p">()</span> <span class="o">!==</span> <span class="s2">""</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">newInput</span><span class="p">.</span><span class="nx">val</span><span class="p">()</span> <span class="o">!= [...]
- <span class="k">this</span><span class="p">.</span><span class="nx">tooltipTimeout</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
- <span class="nx">tt</span><span class="p">.</span><span class="nx">show</span><span class="p">().</span><span class="nx">fadeIn</span><span class="p">();</span>
- <span class="p">},</span> <span class="mi">1000</span><span class="p">);</span>
- <span class="p">}</span>
- <span class="p">},</span>
-
- <span class="nx">clearCompleted</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
- <span class="nx">thisView</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
- <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">Todos</span><span class="p">.</span><span class="nx">done</span><span class="p">(),</span> <span class="kd">function</span><span class="p">(</span><span class="nx">todo</span><span class="p">){</span>
- <span class="nx">todo</span><span class="p">.</span><span class="nx">destroy</span><span class="p">({</span><span class="nx">success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">todo</span><span class="p">){</span>
- <span class="nx">thisView</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">"#todo-"</span><span class="o">+</span><span class="nx">todo</span><span class="p">.</span><span class="nx">id</span><span class="p">).</span><span class="nx">remove</span><span class="p">();</span>
- <span class="p">}});</span>
- <span class="p">});</span>
+ <span class="k">if</span> <span class="p">(</span><span class="nx">val</span> <span class="o">==</span> <span class="s1">''</span> <span class="o">||</span> <span class="nx">val</span> <span class="o">==</span> <span class="k">this</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'placeholder'</span><span class="p">))</span> <span class="k">return</span><span class [...]
+ <span class="kd">var</span> <span class="nx">show</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span> <span class="nx">tooltip</span><span class="p">.</span><span class="nx">show</span><span class="p">().</span><span class="nx">fadeIn</span><span class="p">();</span> <span class="p">};</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">tooltipTimeout</span> <span class="o">=</span> <span class="nx">_</span><span class="p">.</span><span class="nx">delay</span><span class="p">(</span><span class="nx">show</span><span class="p">,</span> <span class="mi">1000</span><span class="p">);</span>
<span class="p">}</span>
- <span class="p">});</span>
-
- <span class="nb">window</span><span class="p">.</span><span class="nx">App</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AppView</span><span class="p">;</span>
+ <span class="p">});</span></pre></div> </td> </tr> <tr id="section-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">¶</a> </div> <p>Finally, we kick things off by creating the <strong>App</strong>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span [...]
<span class="p">});</span>
diff --git a/examples/todos/index.html b/examples/todos/index.html
index 3a2b238..cb47331 100644
--- a/examples/todos/index.html
+++ b/examples/todos/index.html
@@ -12,6 +12,8 @@
</head>
<body>
+
+ <!-- Todo App Interface -->
<div id="todoapp">
@@ -46,6 +48,8 @@
<br />
<a href="http://jgn.me/">Jérôme Gravel-Niquet</a>
</div>
+
+ <!-- Templates -->
<script type="text/template" id="item-template">
<div class="todo <%= done ? 'done' : '' %>">
diff --git a/examples/todos/todos.js b/examples/todos/todos.js
index a4548ca..18aff7c 100644
--- a/examples/todos/todos.js
+++ b/examples/todos/todos.js
@@ -1,11 +1,24 @@
-// Example Backbone App contributed by Jérôme Gravel-Niquet.
+// Example Backbone App contributed by [Jérôme Gravel-Niquet](http://jgn.me/).
-// Load the application once the DOM is ready:
+// Load the application once the DOM is ready, using `jQuery.ready`:
$(function(){
- // Our basic **Todo** model. Has `content`, `order`, and `done` attributes.
+ // Todo Model
+ // ----------
+
+ // Our basic **Todo** model has `content`, `order`, and `done` attributes.
window.Todo = Backbone.Model.extend({
+ EMPTY: "empty todo...",
+
+ // Ensure that each todo is created with the `content` field filled in, if
+ // nothing has been specified.
+ initialize: function() {
+ if (!this.get("content")) {
+ this.set({"content": this.EMPTY});
+ }
+ },
+
// Toggle the `done` state of this todo item.
toggle: function() {
this.save({done: !this.get("done")});
@@ -19,7 +32,10 @@ $(function(){
});
- // The collection of Todos. Backed by *localStorage* instead of a remote
+ // Todo Collection
+ // ---------------
+
+ // The collection of todos is backed by *localStorage* instead of a remote
// server.
window.TodoList = Backbone.Collection.extend({
@@ -34,6 +50,11 @@ $(function(){
return this.filter(function(todo){ return todo.get('done'); });
},
+ // Filter down the list to only todo items that are still not finished.
+ remaining: function() {
+ return this.without.apply(this, this.done());
+ },
+
// We keep the Todos in sequential order, despite being saved by unordered
// GUID in the database. This generates the next order number for new items.
nextOrder: function() {
@@ -51,16 +72,19 @@ $(function(){
// Create our global collection of **Todos**.
window.Todos = new TodoList;
- // The view for a single Todo item...
+ // Todo Item View
+ // --------------
+
+ // The DOM element for a todo item...
window.TodoView = Backbone.View.extend({
//... is a list tag.
tagName: "li",
- // Cache the template function for a single todo.
+ // Cache the template function for a single item.
template: _.template($('#item-template').html()),
- // The DOM events specific to a todo item.
+ // The DOM events specific to an item.
events: {
"click .check" : "toggleDone",
"dblclick div.todo-content" : "edit",
@@ -102,31 +126,43 @@ $(function(){
$(this.el).addClass("editing");
},
- // If you hit enter, submit the changes to the todo item.
+ // If you hit enter, submit the changes to the todo item's `content`.
updateOnEnter: function(e) {
if (e.keyCode != 13) return;
this.model.save({content: this.$(".todo-input").val()});
$(this.el).removeClass("editing");
},
+ // Remove the item, destroy the model.
clear: function() {
this.model.clear();
}
});
+ // The Application
+ // ---------------
+
+ // Our overall **AppView** is the top-level piece of UI.
window.AppView = Backbone.View.extend({
+ // Instead of generating a new element, bind to the existing skeleton of
+ // the App already present in the HTML.
el: $("#todoapp"),
+ // Our template for the line of statistics at the bottom of the app.
template: _.template($('#stats-template').html()),
+ // Delegated events for creating new items, and clearing completed ones.
events: {
"keypress #new-todo": "createOnEnter",
"keyup #new-todo": "showTooltip",
"click .todo-clear a": "clearCompleted"
},
+ // At initialization we bind to the relevant events on the `Todos`
+ // collection, when items are added or changed. Kick things off by
+ // loading any preexisting todos that might be saved in *localStorage*.
initialize: function() {
_.bindAll(this, 'addOne', 'addAll', 'render');
@@ -139,54 +175,67 @@ $(function(){
Todos.fetch();
},
+ // Re-rendering the App just means refreshing the statistics -- the rest
+ // of the app doesn't change.
render: function() {
var done = Todos.done().length;
this.$('#todo-stats').html(this.template({
- done: done,
total: Todos.length,
- remaining: Todos.length - done
+ done: Todos.done().length,
+ remaining: Todos.remaining().length
}));
},
+ // Add a single todo item to the list by creating a view for it, and
+ // appending its element to the `<ul>`.
addOne: function(todo) {
var view = new TodoView({model: todo});
this.$("#todo-list").append(view.render().el);
},
+ // Add all items in the **Todos** collection at once.
addAll: function() {
Todos.each(this.addOne);
},
- createOnEnter: function(e) {
- if (e.keyCode != 13) return;
- Todos.create({
+ // Generate the attributes for a new Todo item.
+ newAttributes: function() {
+ return {
content: this.input.val(),
order: Todos.nextOrder(),
done: false
- });
- this.input.val('');
+ };
},
- showTooltip: function(e) {
- var tooltip = this.$(".ui-tooltip-top");
- tooltip.fadeOut();
-
- if (this.tooltipTimeout) clearTimeout(this.tooltipTimeout);
-
- if (this.input.val() !== "" && this.input.val() !== this.input.attr('placeholder')) {
- this.tooltipTimeout = setTimeout(function(){
- tooltip.show().fadeIn();
- }, 1000);
- }
+ // If you hit return in the main input field, create new **Todo** model,
+ // persisting it to *localStorage*.
+ createOnEnter: function(e) {
+ if (e.keyCode != 13) return;
+ Todos.create(this.newAttributes());
+ this.input.val('');
},
+ // Clear all done todo items, destroying their models.
clearCompleted: function() {
_.each(Todos.done(), function(todo){ todo.clear(); });
return false;
+ },
+
+ // Lazily show the tooltip that tells you to press `enter` to save
+ // a new todo item, after one second.
+ showTooltip: function(e) {
+ var tooltip = this.$(".ui-tooltip-top");
+ var val = this.input.val();
+ tooltip.fadeOut();
+ if (this.tooltipTimeout) clearTimeout(this.tooltipTimeout);
+ if (val == '' || val == this.input.attr('placeholder')) return;
+ var show = function(){ tooltip.show().fadeIn(); };
+ this.tooltipTimeout = _.delay(show, 1000);
}
});
+ // Finally, we kick things off by creating the **App**.
window.App = new AppView;
});
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/backbone.git
More information about the Pkg-javascript-commits
mailing list