/doc/TodoListView.html

http://github.com/radekstepan/fundamental.js · HTML · 99 lines · 94 code · 5 blank · 0 comment · 0 complexity · a37378758a66f781fc9a516620b0ae6a MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.   <meta http-equiv="content-type" content="text/html;charset=utf-8">
    5. 

  5.   <title>TodoListView.js</title>
    6. 

  6.   <link rel="stylesheet" href="pycco.css">
    7. 

  7. </head>
    8. 

  8. <body>
    9. 

  9. <div id='container'>
    10. 

  10.   <div id="background"></div>
    11. 

  11.   
    12. 

  12.   <table cellspacing=0 cellpadding=0>
    13. 

  13.   <thead>
    14. 

  14.     <tr>
    15. 

  15.       <th class=docs><h1>TodoListView.js</h1></th>
    16. 

  16.       <th class=code></th>
    17. 

  17.     </tr>
    18. 

  18.   </thead>
    19. 

  19.   <tbody>
    20. 

  20.     <tr id='section-0'>
    21. 

  21.       <td class=docs>
    22. 

  22.         <div class="octowrap">
    23. 

  23.           <a class="octothorpe" href="#section-0">#</a>
    24. 

  24.         </div>
    25. 

  25.         <h2>Todo List View</h2>
    26. 

  26.       </td>
    27. 

  27.       <td class=code>
    28. 

  28.         <div class='highlight'><pre><div class="highlight"><pre><span class="nx">App</span><span class="p">.</span><span class="nx">Views</span><span class="p">.</span><span class="nx">TodoListView</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>
    29. 

  29. 

  30. 	<span class="s2">&quot;el&quot;</span><span class="o">:</span> <span class="s2">&quot;#todos&quot;</span><span class="p">,</span>
    31. 

  31. 

  32. 	<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span></pre></div></pre></div>
    33. 

  33.       </td>
    34. 

  34.     </tr><tr id='section-1'>
    35. 

  35.       <td class=docs>
    36. 

  36.         <div class="octowrap">
    37. 

  37.           <a class="octothorpe" href="#section-1">#</a>
    38. 

  38.         </div>
    39. 

  39.         <p>Bind to <code>todoCreated</code> notification so we can update the list view.</p>
    40. 

  40.       </td>
    41. 

  41.       <td class=code>
    42. 

  42.         <div class='highlight'><pre><div class="highlight"><pre>		<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="s2">&quot;addOneTodo&quot;</span><span class="p">);</span>
    43. 

  43. 		<span class="nx">App</span><span class="p">.</span><span class="nx">Mediator</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">&quot;todoCreated&quot;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">addOneTodo</span><span class="p">);</span></pre></div></pre></div>
    44. 

  44.       </td>
    45. 

  45.     </tr><tr id='section-2'>
    46. 

  46.       <td class=docs>
    47. 

  47.         <div class="octowrap">
    48. 

  48.           <a class="octothorpe" href="#section-2">#</a>
    49. 

  49.         </div>
    50. 

  50.         <p>On initialization, add all existing <strong>Todo</strong> items.</p>
    51. 

  51.       </td>
    52. 

  52.       <td class=code>
    53. 

  53.         <div class='highlight'><pre><div class="highlight"><pre>		<span class="k">this</span><span class="p">.</span><span class="nx">addAllTodos</span><span class="p">();</span>
    54. 

  54. 	<span class="p">},</span></pre></div></pre></div>
    55. 

  55.       </td>
    56. 

  56.     </tr><tr id='section-3'>
    57. 

  57.       <td class=docs>
    58. 

  58.         <div class="octowrap">
    59. 

  59.           <a class="octothorpe" href="#section-3">#</a>
    60. 

  60.         </div>
    61. 

  61.         <p>Add a single todo item to the list by creating a view for it, and
    62. 

  62. appending its element to the <code>&lt;ul&gt;</code>.</p>
    63. 

  63.       </td>
    64. 

  64.       <td class=code>
    65. 

  65.         <div class='highlight'><pre><div class="highlight"><pre>	<span class="nx">addOneTodo</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>
    66. 

  66. 		<span class="kd">var</span> <span class="nx">view</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">App</span><span class="p">.</span><span class="nx">Views</span><span class="p">.</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>
    67. 

  67. 		<span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#todo-list&quot;</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></pre></div></pre></div>
    68. 

  68.       </td>
    69. 

  69.     </tr><tr id='section-4'>
    70. 

  70.       <td class=docs>
    71. 

  71.         <div class="octowrap">
    72. 

  72.           <a class="octothorpe" href="#section-4">#</a>
    73. 

  73.         </div>
    74. 

  74.         <p>Send a notification that we need to update the stats.</p>
    75. 

  75.       </td>
    76. 

  76.       <td class=code>
    77. 

  77.         <div class='highlight'><pre><div class="highlight"><pre>		<span class="nx">App</span><span class="p">.</span><span class="nx">Mediator</span><span class="p">.</span><span class="nx">trigger</span><span class="p">(</span><span class="s2">&quot;todosStatsUpdated&quot;</span><span class="p">);</span>
    78. 

  78. 	<span class="p">},</span></pre></div></pre></div>
    79. 

  79.       </td>
    80. 

  80.     </tr><tr id='section-5'>
    81. 

  81.       <td class=docs>
    82. 

  82.         <div class="octowrap">
    83. 

  83.           <a class="octothorpe" href="#section-5">#</a>
    84. 

  84.         </div>
    85. 

  85.         <p>Add all items in the <strong>Todos</strong> collection at once.</p>
    86. 

  86.       </td>
    87. 

  87.       <td class=code>
    88. 

  88.         <div class='highlight'><pre><div class="highlight"><pre>	<span class="nx">addAllTodos</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    89. 

  89. 		<span class="nx">App</span><span class="p">.</span><span class="nx">Models</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">addOneTodo</span><span class="p">);</span>
    90. 

  90. 	<span class="p">},</span>
    91. 

  91. 

  92. <span class="p">});</span>
    93. 

  93. 

  94. </pre></div></pre></div>
    95. 

  95.       </td>
    96. 

  96.     </tr>
    97. 

  97.   </table>
    98. 

  98. </div>
    99. 

  99. </body>
    100.