github/backbone
1
1
Fork 0
mirror of https://github.com/jashkenas/backbone.git synced 2026-04-30 03:00:06 -04:00
Code Issues Packages Projects Releases Wiki Activity

A little further on.

Browse Source
This commit is contained in:
Jeremy Ashkenas
2010-10-25 14:58:22 -04:00
parent 6b6d3a707c
commit 092131db0a
5 changed files with 256 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
docs/todos.html Normal file
View File

@@ -0,0 +1,182 @@
<!DOCTYPE html> <html> <head> <title>todos.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> todos.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> </td> <td class="code"> <div class="highlight"><pre><span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <p>Todo</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span class="p">.</span><span class="nx">Todo</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
<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">&quot;todo-&quot;</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="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">&#182;</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 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>
<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">&quot;tasks&quot;</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">&#182;</a> </div> <p>Returns all done todos.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">done</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="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">&#39;done&#39;</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="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">&#39;order&#39;</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="k">return</span> <span class="nx">todo</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;order&#39;</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">&quot;li&quot;</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">&#39;#item-template&#39;</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">&quot;click input[type=checkbox]&quot;</span><span class="o">:</span> <span class="s2">&quot;markAsDone&quot;</span><span class="p">,</span>
<span class="s2">&quot;dblclick div.todo-content&quot;</span> <span class="o">:</span> <span class="s2">&quot;edit&quot;</span><span class="p">,</span>
<span class="s2">&quot;click span.todo-destroy&quot;</span> <span class="o">:</span> <span class="s2">&quot;destroy&quot;</span><span class="p">,</span>
<span class="s2">&quot;keypress .todo-input&quot;</span> <span class="o">:</span> <span class="s2">&quot;changed&quot;</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">&#39;render&#39;</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">&#39;change&#39;</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="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="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">&#39;content&#39;</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;.todo-content&#39;</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">&#39;.todo-input&#39;</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">&quot;done&quot;</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">&#39;.todo&#39;</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">&quot;editing&quot;</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">&quot;input[type=text]&quot;</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="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>
<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">&quot;#todoapp&quot;</span><span class="p">),</span>
<span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">&quot;keypress input#new-todo&quot;</span><span class="o">:</span> <span class="s2">&quot;createIfEnter&quot;</span><span class="p">,</span>
<span class="s2">&quot;keyup input#new-todo&quot;</span><span class="o">:</span> <span class="s2">&quot;showTooltip&quot;</span><span class="p">,</span>
<span class="s2">&quot;click span.todo-clear&quot;</span><span class="o">:</span> <span class="s2">&quot;clearCompleted&quot;</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">&#39;addTodo&#39;</span><span class="p">,</span> <span class="s1">&#39;clearCompleted&#39;</span><span class="p">,</span> <span class="s1">&#39;showTooltip&#39;</span><span class="p">,</span> <span class="s1">&#39;createIfEnter&#39;</span><span class="p">,</span> <span class="s1">&#39;analyzeTodos&#39;</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">&#39;add&#39;</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">&quot;#todo-list&quot;</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">&quot;#new-todo&quot;</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">&quot;.ui-tooltip-top&quot;</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">&quot;add&quot;</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">&quot;remove&quot;</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">&quot;change&quot;</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">&quot;.number&quot;</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">&quot;.word&quot;</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">&#39;item&#39;</span> <span class="o">:</span> <span class="s1">&#39;items&#39;</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">&quot;span.todo-count&quot;</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">&gt;</span> <span class="mi">0</span> <span class="o">?</span> <span class="s2">&quot;inline&quot;</span> <span class="o">:</span> <span class="s2">&quot;none&quot;</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">&quot;span.todo-clear&quot;</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">&gt;</span> <span class="mi">0</span> <span class="o">?</span> <span class="s2">&quot;inline&quot;</span> <span class="o">:</span> <span class="s2">&quot;none&quot;</span><span class="p">});</span>
<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="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">&#39;&#39;</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">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">&quot;&quot;</span> <span class="o">&amp;&amp;</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="k">this</span><span class="p">.</span><span class="nx">newInput</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;placeholder&#39;</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">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">&quot;#todo-&quot;</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="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> </tbody> </table> </div> </body> </html>

57
examples/todos/index.html
View File

@@ -1,40 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>Backbone Demo: Todos</title>
<link href="screen.css" media="all" rel="stylesheet" type="text/css"/>
<link href="todos.css" media="all" rel="stylesheet" type="text/css"/>
<script src="../../test/vendor/jquery-1.4.2.js"></script>
<script src="../../test/vendor/underscore-1.1.0.js"></script>
<script src="../../backbone.js"></script>
<script src="javascripts/backbone.localStorage.js"></script>
<script src="javascripts/todos.js"></script>
<script src="../../test/vendor/backbone.localStorage.js"></script>
<script src="todos.js"></script>
</head>
<body>
<div id='todoapp'>
<div id="todoapp">
<div class='title'>
<div class="title">
<h1>Todos</h1>
</div>
<div class='content'>
<div class="content">
<div id='create-todo'>
<input id='new-todo' placeholder='What needs to be done?' type='text' />
<span class='ui-tooltip-top' style='display:none;'>Press Enter to add this task</span>
<div id="create-todo">
<input id="new-todo" placeholder="What needs to be done?" type="text" />
<span class="ui-tooltip-top" style="display:none;">Press Enter to save this task</span>
</div>
<div id='todos'>
<ul id='todo-list'></ul>
<div id="todos">
<ul id="todo-list"></ul>
</div>
<div id='todo-stats'>
<span class='todo-count'>
<span class='number'>0</span>
<span class='word'>todos</span>.
<div id="todo-stats">
<span class="todo-count">
<span class="number">0</span>
<span class="word">items</span> left.
</span>
<span class='todo-clear'>
<a href='#'>Clear completed</a>
<span class="todo-clear">
<a href="#">Clear completed</a>
</span>
</div>
@@ -42,15 +44,30 @@
</div>
<ul id='instructions'>
<ul id="instructions">
<li>Double-click to edit a todo.</li>
<li><a href="../../docs/todos.html">View the annotated source.</a></li>
</ul>
<div id='credits'>
<div id="credits">
Created by
<br />
<a href='http://jgn.me/'>J&eacute;r&ocirc;me Gravel-Niquet</a>
<a href="http://jgn.me/">J&eacute;r&ocirc;me Gravel-Niquet</a>
</div>
<script type="text-template" id="item-template">
<div class="todo <%= done ? 'done' : '' %>">
<div class="display">
<input type="checkbox" <%= done ? 'checked="checked"' : '' %> />
<div class="todo-content"></div>
<span class="todo-destroy"></span>
</div>
<div class="edit">
<input class="todo-input" type="text" value="" />
</div>
</div>
</script>
</body>
</html>

26
examples/todos/screen.css → examples/todos/todos.css
View File

@@ -128,15 +128,14 @@ body {
margin-top: 10px;
}
/* line 56 */
#todoapp .content ul#todo-list li {
#todo-list .todo {
padding: 15px 20px 15px 0;
position: relative;
font-size: 24px;
border-bottom: 1px solid #cccccc;
*zoom: 1;
}
/* line 22, /opt/ree/lib/ruby/gems/1.8/gems/compass-0.10.5/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
#todoapp .content ul#todo-list li:after {
#todoapp .content ul#todo-list .todo:after {
content: "\0020";
display: block;
height: 0;
@@ -145,19 +144,27 @@ body {
visibility: hidden;
}
/* line 62 */
#todoapp .content ul#todo-list li.editing {
#todo-list .editing {
padding: 0;
border-bottom: 0;
}
#todo-list .editing .display,
#todo-list .edit {
display: none;
}
#todo-list .editing .edit {
display: block;
}
/* line 65 */
#todoapp .content ul#todo-list li.editing input {
#todoapp .content ul#todo-list .editing input {
width: 466px;
font-size: 24px;
font-family: inherit;
margin: 0;
line-height: 1.4em;
border: 0;
outline: none;
padding: 6px;
padding: 7px 7px 8px;
border: 1px solid #999999;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
@@ -172,7 +179,7 @@ body {
float: left;
}
/* line 82 */
#todoapp .content ul#todo-list li.done .todo-content {
#todo-list .done .todo-content {
text-decoration: line-through;
color: #777777;
}
@@ -243,6 +250,9 @@ body {
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center;
}
#instructions a {
color: #336699;
}
/* line 127 */
#credits {

53
examples/todos/javascripts/todos.js → examples/todos/todos.js
View File

@@ -5,6 +5,10 @@ $(function(){
parse: function(resp) {
return resp.model;
},
htmlId: function() {
return "todo-" + this.id;
}
});
@@ -41,40 +45,33 @@ $(function(){
window.TodoView = Backbone.View.extend({
tagName: "li",
className: "todo",
tagName: "li",
template: _.template("<input type='checkbox' /><div class='todo-content'><%= content %></div><span class='todo-destroy'></span>"),
editTemplate: _.template("<input type='text' value='<%= content %>' />"),
template: _.template($('#item-template').html()),
events: {
"click input[type=checkbox]": "markAsDone",
"dblclick div.todo-content" : "edit",
"click span.todo-destroy" : "destroy",
"keypress input[type=text]" : "changed"
"keypress .todo-input" : "changed"
},
initialize: function() {
_.bindAll(this, 'toggleDone');
this.model.bind('change:done', this.toggleDone);
_.bindAll(this, 'render');
this.model.bind('change', this.render);
this.el.id = this.model.htmlId();
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
$(this.el).attr({id : "todo-"+this.model.get("id")});
this.checkbox = this.$("input[type=checkbox]");
this.toggleDone();
this.setContent();
return this;
},
toggleDone: function() {
if (this.model.get('done')) {
$(this.el).addClass("done");
this.checkbox.attr({checked: "checked"});
} else {
$(this.el).removeClass("done");
this.checkbox.attr({checked: null});
}
setContent: function() {
var content = this.model.get('content');
this.$('.todo-content').text(content);
this.$('.todo-input').val(content);
},
markAsDone: function() {
@@ -82,25 +79,13 @@ $(function(){
},
edit: function() {
$(this.el).html(this.editTemplate(this.model.toJSON()));
$(this.el).addClass("editing");
this.$('.todo').addClass("editing");
this.updateInput = this.$("input[type=text]");
},
changed: function(e) {
if (e.code == 13) {
var thisView = this;
this.model.save(
{
content: this.updateInput.val()
},
{
success: function(todo) {
thisView.render();
$(thisView.el).removeClass("editing");
}
}
);
if (e.keyCode == 13) {
this.model.save({content: this.updateInput.val()});
}
},
@@ -153,7 +138,7 @@ $(function(){
var totalCount = todoCount - doneCount;
this.$(".number").text(totalCount);
this.$(".word").text(totalCount == 1 ? 'todo' : 'todos');
this.$(".word").text(totalCount == 1 ? 'item' : 'items');
this.$("span.todo-count").css({display: todoCount > 0 ? "inline" : "none"});
this.$("span.todo-clear").css({display: doneCount > 0 ? "inline" : "none"});
},

0
examples/todos/javascripts/backbone.localStorage.js → test/vendor/backbone.localStorage.js vendored
View File