[Pkg-javascript-commits] [backbone] 10/74: A little further on.
Jonas Smedegaard
js at moszumanska.debian.org
Sat May 3 16:59:04 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 092131db0ae10c942f1d67d287bbdd154ea4524b
Author: Jeremy Ashkenas <jashkenas at gmail.com>
Date: Mon Oct 25 14:58:22 2010 -0400
A little further on.
---
docs/todos.html | 182 +++++++++++++++++++++
examples/todos/index.html | 57 ++++---
examples/todos/{screen.css => todos.css} | 26 ++-
examples/todos/{javascripts => }/todos.js | 53 +++---
.../vendor}/backbone.localStorage.js | 0
5 files changed, 256 insertions(+), 62 deletions(-)
diff --git a/docs/todos.html b/docs/todos.html
new file mode 100644
index 0000000..df9d142
--- /dev/null
+++ b/docs/todos.html
@@ -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> [...]
+
+ <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="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="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="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="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="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="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">'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="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">"#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="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">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="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>
\ No newline at end of file
diff --git a/examples/todos/index.html b/examples/todos/index.html
index 5008806..c30273a 100644
--- a/examples/todos/index.html
+++ b/examples/todos/index.html
@@ -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érôme Gravel-Niquet</a>
+ <a href="http://jgn.me/">Jérô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>
diff --git a/examples/todos/screen.css b/examples/todos/todos.css
similarity index 93%
rename from examples/todos/screen.css
rename to examples/todos/todos.css
index 2831c8a..fabc3c3 100644
--- a/examples/todos/screen.css
+++ b/examples/todos/todos.css
@@ -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 {
diff --git a/examples/todos/javascripts/todos.js b/examples/todos/todos.js
similarity index 74%
rename from examples/todos/javascripts/todos.js
rename to examples/todos/todos.js
index 662af37..15d1218 100644
--- a/examples/todos/javascripts/todos.js
+++ b/examples/todos/todos.js
@@ -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"});
},
diff --git a/examples/todos/javascripts/backbone.localStorage.js b/test/vendor/backbone.localStorage.js
similarity index 100%
rename from examples/todos/javascripts/backbone.localStorage.js
rename to test/vendor/backbone.localStorage.js
--
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