PageRenderTime 3246ms CodeModel.GetById 15ms RepoModel.GetById 1ms app.codeStats 1ms

/dist/bower_components/backbone-amd/docs/todos.html

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