PageRenderTime 49ms CodeModel.GetById 15ms RepoModel.GetById 0ms app.codeStats 1ms

/docs/todos.html

https://gitlab.com/Rockyspade/backbone
HTML | 791 lines | 518 code | 273 blank | 0 comment | 0 complexity | 8c449cfd39126c0891331d96552f49f3 MD5 | raw file
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>todos.js</title>
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6. <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  7. <link rel="stylesheet" media="all" href="docco.css" />
  8. </head>
  9. <body>
  10. <div id="container">
  11. <div id="background"></div>
  12. <ul id="jump_to">
  13. <li>
  14. <a class="large" href="javascript:void(0);">Jump To &hellip;</a>
  15. <a class="small" href="javascript:void(0);">+</a>
  16. <div id="jump_wrapper">
  17. <div id="jump_page_wrapper">
  18. <div id="jump_page">
  19. <a class="source" href="backbone.localStorage.html">
  20. backbone.localStorage.js
  21. </a>
  22. <a class="source" href="todos.html">
  23. todos.js
  24. </a>
  25. </div>
  26. </div>
  27. </li>
  28. </ul>
  29. <ul class="sections">
  30. <li id="title">
  31. <div class="annotation">
  32. <h1>todos.js</h1>
  33. </div>
  34. </li>
  35. <li id="section-1">
  36. <div class="annotation">
  37. <div class="pilwrap ">
  38. <a class="pilcrow" href="#section-1">&#182;</a>
  39. </div>
  40. <p>An example Backbone application contributed by
  41. <a href="http://jgn.me/">Jérôme Gravel-Niquet</a>. This demo uses a simple
  42. <a href="backbone.localstorage.html">LocalStorage adapter</a>
  43. to persist Backbone models within your browser.</p>
  44. </div>
  45. </li>
  46. <li id="section-2">
  47. <div class="annotation">
  48. <div class="pilwrap ">
  49. <a class="pilcrow" href="#section-2">&#182;</a>
  50. </div>
  51. <p>Load the application once the DOM is ready, using <code>jQuery.ready</code>:</p>
  52. </div>
  53. <div class="content"><div class='highlight'><pre>$(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{</pre></div></div>
  54. </li>
  55. <li id="section-3">
  56. <div class="annotation">
  57. <div class="pilwrap ">
  58. <a class="pilcrow" href="#section-3">&#182;</a>
  59. </div>
  60. <h2 id="todo-model">Todo Model</h2>
  61. </div>
  62. </li>
  63. <li id="section-4">
  64. <div class="annotation">
  65. <div class="pilwrap ">
  66. <a class="pilcrow" href="#section-4">&#182;</a>
  67. </div>
  68. </div>
  69. </li>
  70. <li id="section-5">
  71. <div class="annotation">
  72. <div class="pilwrap ">
  73. <a class="pilcrow" href="#section-5">&#182;</a>
  74. </div>
  75. <p>Our basic <strong>Todo</strong> model has <code>title</code>, <code>order</code>, and <code>done</code> attributes.</p>
  76. </div>
  77. <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> Todo = Backbone.Model.extend({</pre></div></div>
  78. </li>
  79. <li id="section-6">
  80. <div class="annotation">
  81. <div class="pilwrap ">
  82. <a class="pilcrow" href="#section-6">&#182;</a>
  83. </div>
  84. <p>Default attributes for the todo item.</p>
  85. </div>
  86. <div class="content"><div class='highlight'><pre> defaults: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  87. <span class="hljs-keyword">return</span> {
  88. title: <span class="hljs-string">"empty todo..."</span>,
  89. order: Todos.nextOrder(),
  90. done: <span class="hljs-literal">false</span>
  91. };
  92. },</pre></div></div>
  93. </li>
  94. <li id="section-7">
  95. <div class="annotation">
  96. <div class="pilwrap ">
  97. <a class="pilcrow" href="#section-7">&#182;</a>
  98. </div>
  99. <p>Toggle the <code>done</code> state of this todo item.</p>
  100. </div>
  101. <div class="content"><div class='highlight'><pre> toggle: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  102. <span class="hljs-keyword">this</span>.save({done: !<span class="hljs-keyword">this</span>.get(<span class="hljs-string">"done"</span>)});
  103. }
  104. });</pre></div></div>
  105. </li>
  106. <li id="section-8">
  107. <div class="annotation">
  108. <div class="pilwrap ">
  109. <a class="pilcrow" href="#section-8">&#182;</a>
  110. </div>
  111. <h2 id="todo-collection">Todo Collection</h2>
  112. </div>
  113. </li>
  114. <li id="section-9">
  115. <div class="annotation">
  116. <div class="pilwrap ">
  117. <a class="pilcrow" href="#section-9">&#182;</a>
  118. </div>
  119. </div>
  120. </li>
  121. <li id="section-10">
  122. <div class="annotation">
  123. <div class="pilwrap ">
  124. <a class="pilcrow" href="#section-10">&#182;</a>
  125. </div>
  126. <p>The collection of todos is backed by <em>localStorage</em> instead of a remote
  127. server.</p>
  128. </div>
  129. <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> TodoList = Backbone.Collection.extend({</pre></div></div>
  130. </li>
  131. <li id="section-11">
  132. <div class="annotation">
  133. <div class="pilwrap ">
  134. <a class="pilcrow" href="#section-11">&#182;</a>
  135. </div>
  136. <p>Reference to this collections model.</p>
  137. </div>
  138. <div class="content"><div class='highlight'><pre> model: Todo,</pre></div></div>
  139. </li>
  140. <li id="section-12">
  141. <div class="annotation">
  142. <div class="pilwrap ">
  143. <a class="pilcrow" href="#section-12">&#182;</a>
  144. </div>
  145. <p>Save all of the todo items under the <code>&quot;todos-backbone&quot;</code> namespace.</p>
  146. </div>
  147. <div class="content"><div class='highlight'><pre> localStorage: <span class="hljs-keyword">new</span> Backbone.LocalStorage(<span class="hljs-string">"todos-backbone"</span>),</pre></div></div>
  148. </li>
  149. <li id="section-13">
  150. <div class="annotation">
  151. <div class="pilwrap ">
  152. <a class="pilcrow" href="#section-13">&#182;</a>
  153. </div>
  154. <p>Filter down the list of all todo items that are finished.</p>
  155. </div>
  156. <div class="content"><div class='highlight'><pre> done: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  157. <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.where({done: <span class="hljs-literal">true</span>});
  158. },</pre></div></div>
  159. </li>
  160. <li id="section-14">
  161. <div class="annotation">
  162. <div class="pilwrap ">
  163. <a class="pilcrow" href="#section-14">&#182;</a>
  164. </div>
  165. <p>Filter down the list to only todo items that are still not finished.</p>
  166. </div>
  167. <div class="content"><div class='highlight'><pre> remaining: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  168. <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.where({done: <span class="hljs-literal">false</span>});
  169. },</pre></div></div>
  170. </li>
  171. <li id="section-15">
  172. <div class="annotation">
  173. <div class="pilwrap ">
  174. <a class="pilcrow" href="#section-15">&#182;</a>
  175. </div>
  176. <p>We keep the Todos in sequential order, despite being saved by unordered
  177. GUID in the database. This generates the next order number for new items.</p>
  178. </div>
  179. <div class="content"><div class='highlight'><pre> nextOrder: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  180. <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.length) <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;
  181. <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.last().get(<span class="hljs-string">'order'</span>) + <span class="hljs-number">1</span>;
  182. },</pre></div></div>
  183. </li>
  184. <li id="section-16">
  185. <div class="annotation">
  186. <div class="pilwrap ">
  187. <a class="pilcrow" href="#section-16">&#182;</a>
  188. </div>
  189. <p>Todos are sorted by their original insertion order.</p>
  190. </div>
  191. <div class="content"><div class='highlight'><pre> comparator: <span class="hljs-string">'order'</span>
  192. });</pre></div></div>
  193. </li>
  194. <li id="section-17">
  195. <div class="annotation">
  196. <div class="pilwrap ">
  197. <a class="pilcrow" href="#section-17">&#182;</a>
  198. </div>
  199. <p>Create our global collection of <strong>Todos</strong>.</p>
  200. </div>
  201. <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> Todos = <span class="hljs-keyword">new</span> TodoList;</pre></div></div>
  202. </li>
  203. <li id="section-18">
  204. <div class="annotation">
  205. <div class="pilwrap ">
  206. <a class="pilcrow" href="#section-18">&#182;</a>
  207. </div>
  208. <h2 id="todo-item-view">Todo Item View</h2>
  209. </div>
  210. </li>
  211. <li id="section-19">
  212. <div class="annotation">
  213. <div class="pilwrap ">
  214. <a class="pilcrow" href="#section-19">&#182;</a>
  215. </div>
  216. </div>
  217. </li>
  218. <li id="section-20">
  219. <div class="annotation">
  220. <div class="pilwrap ">
  221. <a class="pilcrow" href="#section-20">&#182;</a>
  222. </div>
  223. <p>The DOM element for a todo item</p>
  224. </div>
  225. <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> TodoView = Backbone.View.extend({</pre></div></div>
  226. </li>
  227. <li id="section-21">
  228. <div class="annotation">
  229. <div class="pilwrap ">
  230. <a class="pilcrow" href="#section-21">&#182;</a>
  231. </div>
  232. <p> is a list tag.</p>
  233. </div>
  234. <div class="content"><div class='highlight'><pre> tagName: <span class="hljs-string">"li"</span>,</pre></div></div>
  235. </li>
  236. <li id="section-22">
  237. <div class="annotation">
  238. <div class="pilwrap ">
  239. <a class="pilcrow" href="#section-22">&#182;</a>
  240. </div>
  241. <p>Cache the template function for a single item.</p>
  242. </div>
  243. <div class="content"><div class='highlight'><pre> template: _.template($(<span class="hljs-string">'#item-template'</span>).html()),</pre></div></div>
  244. </li>
  245. <li id="section-23">
  246. <div class="annotation">
  247. <div class="pilwrap ">
  248. <a class="pilcrow" href="#section-23">&#182;</a>
  249. </div>
  250. <p>The DOM events specific to an item.</p>
  251. </div>
  252. <div class="content"><div class='highlight'><pre> events: {
  253. <span class="hljs-string">"click .toggle"</span> : <span class="hljs-string">"toggleDone"</span>,
  254. <span class="hljs-string">"dblclick .view"</span> : <span class="hljs-string">"edit"</span>,
  255. <span class="hljs-string">"click a.destroy"</span> : <span class="hljs-string">"clear"</span>,
  256. <span class="hljs-string">"keypress .edit"</span> : <span class="hljs-string">"updateOnEnter"</span>,
  257. <span class="hljs-string">"blur .edit"</span> : <span class="hljs-string">"close"</span>
  258. },</pre></div></div>
  259. </li>
  260. <li id="section-24">
  261. <div class="annotation">
  262. <div class="pilwrap ">
  263. <a class="pilcrow" href="#section-24">&#182;</a>
  264. </div>
  265. <p>The TodoView listens for changes to its model, re-rendering. Since theres
  266. a one-to-one correspondence between a <strong>Todo</strong> and a <strong>TodoView</strong> in this
  267. app, we set a direct reference on the model for convenience.</p>
  268. </div>
  269. <div class="content"><div class='highlight'><pre> initialize: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  270. <span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model, <span class="hljs-string">'change'</span>, <span class="hljs-keyword">this</span>.render);
  271. <span class="hljs-keyword">this</span>.listenTo(<span class="hljs-keyword">this</span>.model, <span class="hljs-string">'destroy'</span>, <span class="hljs-keyword">this</span>.remove);
  272. },</pre></div></div>
  273. </li>
  274. <li id="section-25">
  275. <div class="annotation">
  276. <div class="pilwrap ">
  277. <a class="pilcrow" href="#section-25">&#182;</a>
  278. </div>
  279. <p>Re-render the titles of the todo item.</p>
  280. </div>
  281. <div class="content"><div class='highlight'><pre> render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  282. <span class="hljs-keyword">this</span>.$el.html(<span class="hljs-keyword">this</span>.template(<span class="hljs-keyword">this</span>.model.toJSON()));
  283. <span class="hljs-keyword">this</span>.$el.toggleClass(<span class="hljs-string">'done'</span>, <span class="hljs-keyword">this</span>.model.get(<span class="hljs-string">'done'</span>));
  284. <span class="hljs-keyword">this</span>.input = <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'.edit'</span>);
  285. <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
  286. },</pre></div></div>
  287. </li>
  288. <li id="section-26">
  289. <div class="annotation">
  290. <div class="pilwrap ">
  291. <a class="pilcrow" href="#section-26">&#182;</a>
  292. </div>
  293. <p>Toggle the <code>&quot;done&quot;</code> state of the model.</p>
  294. </div>
  295. <div class="content"><div class='highlight'><pre> toggleDone: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  296. <span class="hljs-keyword">this</span>.model.toggle();
  297. },</pre></div></div>
  298. </li>
  299. <li id="section-27">
  300. <div class="annotation">
  301. <div class="pilwrap ">
  302. <a class="pilcrow" href="#section-27">&#182;</a>
  303. </div>
  304. <p>Switch this view into <code>&quot;editing&quot;</code> mode, displaying the input field.</p>
  305. </div>
  306. <div class="content"><div class='highlight'><pre> edit: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  307. <span class="hljs-keyword">this</span>.$el.addClass(<span class="hljs-string">"editing"</span>);
  308. <span class="hljs-keyword">this</span>.input.focus();
  309. },</pre></div></div>
  310. </li>
  311. <li id="section-28">
  312. <div class="annotation">
  313. <div class="pilwrap ">
  314. <a class="pilcrow" href="#section-28">&#182;</a>
  315. </div>
  316. <p>Close the <code>&quot;editing&quot;</code> mode, saving changes to the todo.</p>
  317. </div>
  318. <div class="content"><div class='highlight'><pre> close: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  319. <span class="hljs-keyword">var</span> value = <span class="hljs-keyword">this</span>.input.val();
  320. <span class="hljs-keyword">if</span> (!value) {
  321. <span class="hljs-keyword">this</span>.clear();
  322. } <span class="hljs-keyword">else</span> {
  323. <span class="hljs-keyword">this</span>.model.save({title: value});
  324. <span class="hljs-keyword">this</span>.$el.removeClass(<span class="hljs-string">"editing"</span>);
  325. }
  326. },</pre></div></div>
  327. </li>
  328. <li id="section-29">
  329. <div class="annotation">
  330. <div class="pilwrap ">
  331. <a class="pilcrow" href="#section-29">&#182;</a>
  332. </div>
  333. <p>If you hit <code>enter</code>, were through editing the item.</p>
  334. </div>
  335. <div class="content"><div class='highlight'><pre> updateOnEnter: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
  336. <span class="hljs-keyword">if</span> (e.keyCode == <span class="hljs-number">13</span>) <span class="hljs-keyword">this</span>.close();
  337. },</pre></div></div>
  338. </li>
  339. <li id="section-30">
  340. <div class="annotation">
  341. <div class="pilwrap ">
  342. <a class="pilcrow" href="#section-30">&#182;</a>
  343. </div>
  344. <p>Remove the item, destroy the model.</p>
  345. </div>
  346. <div class="content"><div class='highlight'><pre> clear: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  347. <span class="hljs-keyword">this</span>.model.destroy();
  348. }
  349. });</pre></div></div>
  350. </li>
  351. <li id="section-31">
  352. <div class="annotation">
  353. <div class="pilwrap ">
  354. <a class="pilcrow" href="#section-31">&#182;</a>
  355. </div>
  356. <h2 id="the-application">The Application</h2>
  357. </div>
  358. </li>
  359. <li id="section-32">
  360. <div class="annotation">
  361. <div class="pilwrap ">
  362. <a class="pilcrow" href="#section-32">&#182;</a>
  363. </div>
  364. </div>
  365. </li>
  366. <li id="section-33">
  367. <div class="annotation">
  368. <div class="pilwrap ">
  369. <a class="pilcrow" href="#section-33">&#182;</a>
  370. </div>
  371. <p>Our overall <strong>AppView</strong> is the top-level piece of UI.</p>
  372. </div>
  373. <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> AppView = Backbone.View.extend({</pre></div></div>
  374. </li>
  375. <li id="section-34">
  376. <div class="annotation">
  377. <div class="pilwrap ">
  378. <a class="pilcrow" href="#section-34">&#182;</a>
  379. </div>
  380. <p>Instead of generating a new element, bind to the existing skeleton of
  381. the App already present in the HTML.</p>
  382. </div>
  383. <div class="content"><div class='highlight'><pre> el: $(<span class="hljs-string">"#todoapp"</span>),</pre></div></div>
  384. </li>
  385. <li id="section-35">
  386. <div class="annotation">
  387. <div class="pilwrap ">
  388. <a class="pilcrow" href="#section-35">&#182;</a>
  389. </div>
  390. <p>Our template for the line of statistics at the bottom of the app.</p>
  391. </div>
  392. <div class="content"><div class='highlight'><pre> statsTemplate: _.template($(<span class="hljs-string">'#stats-template'</span>).html()),</pre></div></div>
  393. </li>
  394. <li id="section-36">
  395. <div class="annotation">
  396. <div class="pilwrap ">
  397. <a class="pilcrow" href="#section-36">&#182;</a>
  398. </div>
  399. <p>Delegated events for creating new items, and clearing completed ones.</p>
  400. </div>
  401. <div class="content"><div class='highlight'><pre> events: {
  402. <span class="hljs-string">"keypress #new-todo"</span>: <span class="hljs-string">"createOnEnter"</span>,
  403. <span class="hljs-string">"click #clear-completed"</span>: <span class="hljs-string">"clearCompleted"</span>,
  404. <span class="hljs-string">"click #toggle-all"</span>: <span class="hljs-string">"toggleAllComplete"</span>
  405. },</pre></div></div>
  406. </li>
  407. <li id="section-37">
  408. <div class="annotation">
  409. <div class="pilwrap ">
  410. <a class="pilcrow" href="#section-37">&#182;</a>
  411. </div>
  412. <p>At initialization we bind to the relevant events on the <code>Todos</code>
  413. collection, when items are added or changed. Kick things off by
  414. loading any preexisting todos that might be saved in <em>localStorage</em>.</p>
  415. </div>
  416. <div class="content"><div class='highlight'><pre> initialize: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  417. <span class="hljs-keyword">this</span>.input = <span class="hljs-keyword">this</span>.$(<span class="hljs-string">"#new-todo"</span>);
  418. <span class="hljs-keyword">this</span>.allCheckbox = <span class="hljs-keyword">this</span>.$(<span class="hljs-string">"#toggle-all"</span>)[<span class="hljs-number">0</span>];
  419. <span class="hljs-keyword">this</span>.listenTo(Todos, <span class="hljs-string">'add'</span>, <span class="hljs-keyword">this</span>.addOne);
  420. <span class="hljs-keyword">this</span>.listenTo(Todos, <span class="hljs-string">'reset'</span>, <span class="hljs-keyword">this</span>.addAll);
  421. <span class="hljs-keyword">this</span>.listenTo(Todos, <span class="hljs-string">'all'</span>, <span class="hljs-keyword">this</span>.render);
  422. <span class="hljs-keyword">this</span>.footer = <span class="hljs-keyword">this</span>.$(<span class="hljs-string">'footer'</span>);
  423. <span class="hljs-keyword">this</span>.main = $(<span class="hljs-string">'#main'</span>);
  424. Todos.fetch();
  425. },</pre></div></div>
  426. </li>
  427. <li id="section-38">
  428. <div class="annotation">
  429. <div class="pilwrap ">
  430. <a class="pilcrow" href="#section-38">&#182;</a>
  431. </div>
  432. <p>Re-rendering the App just means refreshing the statistics the rest
  433. of the app doesnt change.</p>
  434. </div>
  435. <div class="content"><div class='highlight'><pre> render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  436. <span class="hljs-keyword">var</span> done = Todos.done().length;
  437. <span class="hljs-keyword">var</span> remaining = Todos.remaining().length;
  438. <span class="hljs-keyword">if</span> (Todos.length) {
  439. <span class="hljs-keyword">this</span>.main.show();
  440. <span class="hljs-keyword">this</span>.footer.show();
  441. <span class="hljs-keyword">this</span>.footer.html(<span class="hljs-keyword">this</span>.statsTemplate({done: done, remaining: remaining}));
  442. } <span class="hljs-keyword">else</span> {
  443. <span class="hljs-keyword">this</span>.main.hide();
  444. <span class="hljs-keyword">this</span>.footer.hide();
  445. }
  446. <span class="hljs-keyword">this</span>.allCheckbox.checked = !remaining;
  447. },</pre></div></div>
  448. </li>
  449. <li id="section-39">
  450. <div class="annotation">
  451. <div class="pilwrap ">
  452. <a class="pilcrow" href="#section-39">&#182;</a>
  453. </div>
  454. <p>Add a single todo item to the list by creating a view for it, and
  455. appending its element to the <code>&lt;ul&gt;</code>.</p>
  456. </div>
  457. <div class="content"><div class='highlight'><pre> addOne: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(todo)</span> </span>{
  458. <span class="hljs-keyword">var</span> view = <span class="hljs-keyword">new</span> TodoView({model: todo});
  459. <span class="hljs-keyword">this</span>.$(<span class="hljs-string">"#todo-list"</span>).append(view.render().el);
  460. },</pre></div></div>
  461. </li>
  462. <li id="section-40">
  463. <div class="annotation">
  464. <div class="pilwrap ">
  465. <a class="pilcrow" href="#section-40">&#182;</a>
  466. </div>
  467. <p>Add all items in the <strong>Todos</strong> collection at once.</p>
  468. </div>
  469. <div class="content"><div class='highlight'><pre> addAll: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  470. Todos.each(<span class="hljs-keyword">this</span>.addOne, <span class="hljs-keyword">this</span>);
  471. },</pre></div></div>
  472. </li>
  473. <li id="section-41">
  474. <div class="annotation">
  475. <div class="pilwrap ">
  476. <a class="pilcrow" href="#section-41">&#182;</a>
  477. </div>
  478. <p>If you hit return in the main input field, create new <strong>Todo</strong> model,
  479. persisting it to <em>localStorage</em>.</p>
  480. </div>
  481. <div class="content"><div class='highlight'><pre> createOnEnter: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
  482. <span class="hljs-keyword">if</span> (e.keyCode != <span class="hljs-number">13</span>) <span class="hljs-keyword">return</span>;
  483. <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">this</span>.input.val()) <span class="hljs-keyword">return</span>;
  484. Todos.create({title: <span class="hljs-keyword">this</span>.input.val()});
  485. <span class="hljs-keyword">this</span>.input.val(<span class="hljs-string">''</span>);
  486. },</pre></div></div>
  487. </li>
  488. <li id="section-42">
  489. <div class="annotation">
  490. <div class="pilwrap ">
  491. <a class="pilcrow" href="#section-42">&#182;</a>
  492. </div>
  493. <p>Clear all done todo items, destroying their models.</p>
  494. </div>
  495. <div class="content"><div class='highlight'><pre> clearCompleted: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
  496. _.invoke(Todos.done(), <span class="hljs-string">'destroy'</span>);
  497. <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
  498. },
  499. toggleAllComplete: <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
  500. <span class="hljs-keyword">var</span> done = <span class="hljs-keyword">this</span>.allCheckbox.checked;
  501. Todos.each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(todo)</span> </span>{ todo.save({<span class="hljs-string">'done'</span>: done}); });
  502. }
  503. });</pre></div></div>
  504. </li>
  505. <li id="section-43">
  506. <div class="annotation">
  507. <div class="pilwrap ">
  508. <a class="pilcrow" href="#section-43">&#182;</a>
  509. </div>
  510. <p>Finally, we kick things off by creating the <strong>App</strong>.</p>
  511. </div>
  512. <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">var</span> App = <span class="hljs-keyword">new</span> AppView;
  513. });</pre></div></div>
  514. </li>
  515. </ul>
  516. </div>
  517. </body>
  518. </html>