[Pkg-javascript-commits] [backbone] 23/74: Adding the Todos example to the homepage
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 4109040004ec29228916938a82afd9a250949a03
Author: Jeremy Ashkenas <jashkenas at gmail.com>
Date: Tue Oct 26 09:33:21 2010 -0400
Adding the Todos example to the homepage
---
docs/images/todos.png | Bin 0 -> 41820 bytes
docs/todos.html | 62 ++++++++++++++++----------------
examples/todos/todos.js | 13 ++++---
index.html | 93 ++++++++++--------------------------------------
4 files changed, 57 insertions(+), 111 deletions(-)
diff --git a/docs/images/todos.png b/docs/images/todos.png
new file mode 100644
index 0000000..e1003a5
Binary files /dev/null and b/docs/images/todos.png differ
diff --git a/docs/todos.html b/docs/todos.html
index 892d1b4..ba0eb70 100644
--- a/docs/todos.html
+++ b/docs/todos.html
@@ -1,68 +1,68 @@
-<!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> [...]
-
- <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>
+<!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> [...]
+<a href="http://jgn.me/">Jérôme Gravel-Niquet</a>. This demo uses a simple
+<a href="http://github.com/jeromegn/Backbone.localStorage">LocalStorage adapter</a>
+to persist Backbone models within your browser.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>Load the application once the DOM is ready, using <code>jQuery.ready</code>:</p> [...]
<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="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>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="p">},</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</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-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="p">});</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</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-11"> [...]
<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="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>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
+ <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>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></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="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>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="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="p">});</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</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">"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
+ <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>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">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="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>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></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),
+ <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>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></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="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>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="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>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="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>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="p">},</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">¶</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></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="p">});</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">¶</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-33"> <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>
+ <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>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>
@@ -74,35 +74,35 @@ loading any preexisting todos that might be saved in <em>localStorage</em>.</p>
<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
+ <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>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="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">statsTemplate</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
+ <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 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">$</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="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>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="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>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,
+ <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>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="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>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
+ <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>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>
@@ -113,7 +113,7 @@ a new todo item, after one second.</p> </td> <td class="
<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></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></pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">¶</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/todos.js b/examples/todos/todos.js
index 18aff7c..a8650f9 100644
--- a/examples/todos/todos.js
+++ b/examples/todos/todos.js
@@ -1,4 +1,7 @@
-// Example Backbone App contributed by [Jérôme Gravel-Niquet](http://jgn.me/).
+// An example Backbone application contributed by
+// [Jérôme Gravel-Niquet](http://jgn.me/). This demo uses a simple
+// [LocalStorage adapter](http://github.com/jeromegn/Backbone.localStorage)
+// to persist Backbone models within your browser.
// Load the application once the DOM is ready, using `jQuery.ready`:
$(function(){
@@ -9,10 +12,10 @@ $(function(){
// Our basic **Todo** model has `content`, `order`, and `done` attributes.
window.Todo = Backbone.Model.extend({
+ // If you don't provide a todo, one will be provided for you.
EMPTY: "empty todo...",
- // Ensure that each todo is created with the `content` field filled in, if
- // nothing has been specified.
+ // Ensure that each todo created has `content`.
initialize: function() {
if (!this.get("content")) {
this.set({"content": this.EMPTY});
@@ -151,7 +154,7 @@ $(function(){
el: $("#todoapp"),
// Our template for the line of statistics at the bottom of the app.
- template: _.template($('#stats-template').html()),
+ statsTemplate: _.template($('#stats-template').html()),
// Delegated events for creating new items, and clearing completed ones.
events: {
@@ -179,7 +182,7 @@ $(function(){
// of the app doesn't change.
render: function() {
var done = Todos.done().length;
- this.$('#todo-stats').html(this.template({
+ this.$('#todo-stats').html(this.statsTemplate({
total: Todos.length,
done: Todos.done().length,
remaining: Todos.remaining().length
diff --git a/index.html b/index.html
index 783a454..1b94503 100644
--- a/index.html
+++ b/index.html
@@ -1514,81 +1514,24 @@ var DocumentView = Backbone.View.extend({
<h2 id="examples">Examples</h2>
<p>
- As a quick example to help get an idea of how Backbone can be used in a
- real-world project, here are the method signatures (beyond the built-in
- methods that Backbone provides) of the <b>Document</b>
- model, and the <b>DocumentSet</b> collection, as used in
- <a href="http://www.documentcloud.org">DocumentCloud</a>. In the workspace,
- these classes work together with many others: <b>Project</b>, <b>Note</b>,
- <b>Account</b>, <b>Entity</b>, <b>Organization</b>...
- </p>
-
-<pre>
-dc.model.Document = Backbone.Model.extend({
-
- initialize(attributes): ...
-
- canonicalId: ...
-
- url: ...
- viewerUrl: ...
- publishedUrl: ...
- pageThumbnailURL(page): ...
-
- openViewer: ...
- openPublishedViewer: ...
- openText: ...
- openPDF: ...
-
- allowedToEdit: ...
- checkAllowedToEdit(errorMessage): ...
- checkBusy: ...
-
- uniquePageEntities: ...
-
- isPending: ...
- isPublic: ...
- isPublished: ...
-
- toString: ...
-
-});
-
-
-dc.model.DocumentSet = Backbone.Collection.extend({
-
- model: dc.model.Document,
-
- url: '/documents',
-
- initialize(options): ...
-
- comparator(document): ...
-
- selectAll: ...
- deselectAll: ...
- selectedIds: ...
-
- filterPending: ...
- filterSelected: ...
-
- getCommonAttribute(documents, attribute): ...
-
- allowedToEdit(documents, errorMessage): ...
- editAccess(documents): ...
-
- downloadSelectedViewers: ...
- downloadSelectedPDFs: ...
- downloadSelectedTexts: ...
-
- poll: ...
- startPolling: ...
- stopPolling: ...
-
- verifyDestroy(documents): ...
-
-});
-</pre>
+ <a href="http://jgn.me/">Jérôme Gravel-Niquet</a> has contributed a
+ <a href="examples/todos/index.html">Todo List application</a>
+ that is bundled in the repository as Backbone example. If you're wondering
+ where to get started with Backbone in general, take a moment to
+ <a href="docs/todos.html">read through the annotated source</a>. The app uses a
+ <a href="http://github.com/jeromegn/Backbone.localStorage">LocalStorage adapter</a>
+ to transparently save all of your todos within your browser, instead of
+ sending them to a server. Jérôme also has a version hosted at
+ <a href="http://localtodos.com/">localtodos.com</a> that uses a
+ <a href="http://github.com/jeromegn/backbone-mootools">MooTools-backed version of Backbone</a>
+ instead of jQuery.
+ </p>
+
+ <div style="text-align: center;">
+ <a href="examples/todos/index.html">
+ <img src="docs/images/todos.png" alt="Todos" style="margin: 10px auto;" />
+ </a>
+ </div>
<h2 id="changelog">Change Log</h2>
--
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