fundamental.js /doc/TodoListView.html

Language HTML Lines 100
MD5 Hash a37378758a66f781fc9a516620b0ae6a
Repository git://github.com/radekstepan/fundamental.js.git View Raw File View Project SPDX
 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
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>TodoListView.js</title>
  <link rel="stylesheet" href="pycco.css">
</head>
<body>
<div id='container'>
  <div id="background"></div>
  
  <table cellspacing=0 cellpadding=0>
  <thead>
    <tr>
      <th class=docs><h1>TodoListView.js</h1></th>
      <th class=code></th>
    </tr>
  </thead>
  <tbody>
    <tr id='section-0'>
      <td class=docs>
        <div class="octowrap">
          <a class="octothorpe" href="#section-0">#</a>
        </div>
        <h2>Todo List View</h2>
      </td>
      <td class=code>
        <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>

	<span class="s2">&quot;el&quot;</span><span class="o">:</span> <span class="s2">&quot;#todos&quot;</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="nx">options</span><span class="p">)</span> <span class="p">{</span></pre></div></pre></div>
      </td>
    </tr><tr id='section-1'>
      <td class=docs>
        <div class="octowrap">
          <a class="octothorpe" href="#section-1">#</a>
        </div>
        <p>Bind to <code>todoCreated</code> notification so we can update the list view.</p>
      </td>
      <td class=code>
        <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>
		<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>
      </td>
    </tr><tr id='section-2'>
      <td class=docs>
        <div class="octowrap">
          <a class="octothorpe" href="#section-2">#</a>
        </div>
        <p>On initialization, add all existing <strong>Todo</strong> items.</p>
      </td>
      <td class=code>
        <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>
	<span class="p">},</span></pre></div></pre></div>
      </td>
    </tr><tr id='section-3'>
      <td class=docs>
        <div class="octowrap">
          <a class="octothorpe" href="#section-3">#</a>
        </div>
        <p>Add a single todo item to the list by creating a view for it, and
appending its element to the <code>&lt;ul&gt;</code>.</p>
      </td>
      <td class=code>
        <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>
		<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>
		<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>
      </td>
    </tr><tr id='section-4'>
      <td class=docs>
        <div class="octowrap">
          <a class="octothorpe" href="#section-4">#</a>
        </div>
        <p>Send a notification that we need to update the stats.</p>
      </td>
      <td class=code>
        <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>
	<span class="p">},</span></pre></div></pre></div>
      </td>
    </tr><tr id='section-5'>
      <td class=docs>
        <div class="octowrap">
          <a class="octothorpe" href="#section-5">#</a>
        </div>
        <p>Add all items in the <strong>Todos</strong> collection at once.</p>
      </td>
      <td class=code>
        <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>
		<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>
	<span class="p">},</span>

<span class="p">});</span>

</pre></div></pre></div>
      </td>
    </tr>
  </table>
</div>
</body>
Back to Top