forked from jashkenas/backbone
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtodos.html
127 lines (113 loc) · 41.3 KB
/
todos.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html> <html> <head> <title>todos.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="backbone-localstorage.html"> backbone-localstorage.js </a> <a class="source" href="todos.html"> todos.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> todos.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> <p>An example Backbone application contributed by
<a href="http://jgn.me/">Jérôme Gravel-Niquet</a>. This demo uses a simple
<a href="backbone-localstorage.html">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> </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-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <h2>Todo Model</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>Our basic <strong>Todo</strong> model has <code>title</code>, <code>order</code>, and <code>done</code> attributes.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</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></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>Default attributes for the todo item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">defaults</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="p">{</span>
<span class="nx">title</span><span class="o">:</span> <span class="s2">"empty todo..."</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-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>Ensure that each todo created has <code>title</code>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="k">this</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s2">"title"</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">"title"</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">defaults</span><span class="p">.</span><span class="nx">title</span><span class="p">});</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>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> <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">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-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>Remove this Todo from <em>localStorage</em> and delete its view.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">clear</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">destroy</span><span class="p">();</span>
<span class="p">}</span>
<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="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>The collection of todos is backed by <em>localStorage</em> instead of a remote
server.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</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"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>Reference to this collection's model.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">model</span><span class="o">:</span> <span class="nx">Todo</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>Save all of the todo items under the <code>"todos"</code> namespace.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">localStorage</span><span class="o">:</span> <span class="k">new</span> <span class="nx">Store</span><span class="p">(</span><span class="s2">"todos-backbone"</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 of all todo items that are finished.</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">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-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</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">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-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-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="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="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="kd">var</span> <span class="nx">Todos</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">TodoList</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <h2>Todo Item View</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <p>The DOM element for a todo item...</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</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></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <p>... is a list tag.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">tagName</span><span class="o">:</span> <span class="s2">"li"</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <p>Cache the template function for a single item.</p> </td> <td class="code"> <div class="highlight"><pre> <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></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <p>The DOM events specific to an item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">"click .toggle"</span> <span class="o">:</span> <span class="s2">"toggleDone"</span><span class="p">,</span>
<span class="s2">"dblclick .view"</span> <span class="o">:</span> <span class="s2">"edit"</span><span class="p">,</span>
<span class="s2">"click a.destroy"</span> <span class="o">:</span> <span class="s2">"clear"</span><span class="p">,</span>
<span class="s2">"keypress .edit"</span> <span class="o">:</span> <span class="s2">"updateOnEnter"</span><span class="p">,</span>
<span class="s2">"blur .edit"</span> <span class="o">:</span> <span class="s2">"close"</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>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="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="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">'destroy'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">remove</span><span class="p">,</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>Re-render the titles of the todo item.</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="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">$el</span><span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s1">'done'</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">get</span><span class="p">(</span><span class="s1">'done'</span><span class="p">));</span>
<span class="k">this</span><span class="p">.</span><span class="nx">input</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s1">'.edit'</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-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="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">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">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">$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="k">this</span><span class="p">.</span><span class="nx">input</span><span class="p">.</span><span class="nx">focus</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>Close the <code>"editing"</code> mode, saving changes to the todo.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">close</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">value</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="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">value</span><span class="p">)</span> <span class="k">this</span><span class="p">.</span><span class="nx">clear</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">title</span><span class="o">:</span> <span class="nx">value</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>If you hit <code>enter</code>, we're through editing the item.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">updateOnEnter</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">this</span><span class="p">.</span><span class="nx">close</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> <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 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">clear</span><span class="p">();</span>
<span class="p">}</span>
<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="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">¶</a> </div> <p>Our overall <strong>AppView</strong> is the top-level piece of UI.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</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></pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">¶</a> </div> <p>Instead of generating a new element, bind to the existing skeleton of
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="pilcrow" href="#section-33">¶</a> </div> <p>Our template for the line of statistics at the bottom of the app.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">statsTemplate</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">'#stats-template'</span><span class="p">).</span><span class="nx">html</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>Delegated events for creating new items, and clearing completed ones.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">"keypress #new-todo"</span><span class="o">:</span> <span class="s2">"createOnEnter"</span><span class="p">,</span>
<span class="s2">"click #clear-completed"</span><span class="o">:</span> <span class="s2">"clearCompleted"</span><span class="p">,</span>
<span class="s2">"click #toggle-all"</span><span class="o">:</span> <span class="s2">"toggleAllComplete"</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>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="k">this</span><span class="p">.</span><span class="nx">input</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s2">"#new-todo"</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">allCheckbox</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">"#toggle-all"</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
<span class="nx">Todos</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'add'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">addOne</span><span class="p">,</span> <span class="k">this</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">'reset'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">addAll</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
<span class="nx">Todos</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s1">'all'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">render</span><span class="p">,</span> <span class="k">this</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">footer</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">$</span><span class="p">(</span><span class="s1">'footer'</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">main</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'#main'</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-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="kd">var</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="k">if</span> <span class="p">(</span><span class="nx">Todos</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">main</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">footer</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">footer</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">done</span><span class="o">:</span> <span class="nx">done</span><span class="p">,</span> <span class="nx">remaining</span><span class="o">:</span> <span class="nx">remaining</span><span class="p">}));</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">main</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
<span class="k">this</span><span class="p">.</span><span class="nx">footer</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">this</span><span class="p">.</span><span class="nx">allCheckbox</span><span class="p">.</span><span class="nx">checked</span> <span class="o">=</span> <span class="o">!</span><span class="nx">remaining</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 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-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><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<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-39"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39">¶</a> </div> <p>If you hit return in the main input field, create new <strong>Todo</strong> model,
persisting it to <em>localStorage</em>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">createOnEnter</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">!=</span> <span class="mi">13</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</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="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="nx">title</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="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 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">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>
<span class="nx">toggleAllComplete</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="k">this</span><span class="p">.</span><span class="nx">allCheckbox</span><span class="p">.</span><span class="nx">checked</span><span class="p">;</span>
<span class="nx">Todos</span><span class="p">.</span><span class="nx">each</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="p">{</span> <span class="nx">todo</span><span class="p">.</span><span class="nx">save</span><span class="p">({</span><span class="s1">'done'</span><span class="o">:</span> <span class="nx">done</span><span class="p">});</span> <span class="p">});</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>Finally, we kick things off by creating the <strong>App</strong>.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</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>