ovto 0.2.1 → 0.2.2

Sign up to get free protection for your applications and to get access to all the features.
@@ -6,7 +6,7 @@
6
6
  <title>
7
7
  Exception: Ovto::State::MissingValue
8
8
 
9
- &mdash; Documentation by YARD 0.9.12
9
+ &mdash; Documentation by YARD 0.9.16
10
10
 
11
11
  </title>
12
12
 
@@ -125,9 +125,9 @@
125
125
  </div>
126
126
 
127
127
  <div id="footer">
128
- Generated on Fri Jun 1 21:07:20 2018 by
128
+ Generated on Wed Nov 7 18:02:02 2018 by
129
129
  <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
130
- 0.9.12 (ruby-2.4.2).
130
+ 0.9.16 (ruby-2.5.3).
131
131
  </div>
132
132
 
133
133
  </div>
@@ -6,7 +6,7 @@
6
6
  <title>
7
7
  Exception: Ovto::State::UnknownKey
8
8
 
9
- &mdash; Documentation by YARD 0.9.12
9
+ &mdash; Documentation by YARD 0.9.16
10
10
 
11
11
  </title>
12
12
 
@@ -125,9 +125,9 @@
125
125
  </div>
126
126
 
127
127
  <div id="footer">
128
- Generated on Fri Jun 1 21:07:20 2018 by
128
+ Generated on Wed Nov 7 18:02:02 2018 by
129
129
  <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
130
- 0.9.12 (ruby-2.4.2).
130
+ 0.9.16 (ruby-2.5.3).
131
131
  </div>
132
132
 
133
133
  </div>
@@ -6,7 +6,7 @@
6
6
  <title>
7
7
  Class: Ovto::WiredActions
8
8
 
9
- &mdash; Documentation by YARD 0.9.12
9
+ &mdash; Documentation by YARD 0.9.16
10
10
 
11
11
  </title>
12
12
 
@@ -216,12 +216,12 @@
216
216
  <pre class="lines">
217
217
 
218
218
 
219
- 3
220
- 4
221
- 5</pre>
219
+ 5
220
+ 6
221
+ 7</pre>
222
222
  </td>
223
223
  <td>
224
- <pre class="code"><span class="info file"># File 'lib/ovto/wired_actions.rb', line 3</span>
224
+ <pre class="code"><span class="info file"># File 'lib/ovto/wired_actions.rb', line 5</span>
225
225
 
226
226
  <span class='kw'>def</span> <span class='id identifier rubyid_initialize'>initialize</span><span class='lparen'>(</span><span class='id identifier rubyid_actions'>actions</span><span class='comma'>,</span> <span class='id identifier rubyid_app'>app</span><span class='comma'>,</span> <span class='id identifier rubyid_runtime'>runtime</span><span class='rparen'>)</span>
227
227
  <span class='ivar'>@actions</span><span class='comma'>,</span> <span class='ivar'>@app</span><span class='comma'>,</span> <span class='ivar'>@runtime</span> <span class='op'>=</span> <span class='id identifier rubyid_actions'>actions</span><span class='comma'>,</span> <span class='id identifier rubyid_app'>app</span><span class='comma'>,</span> <span class='id identifier rubyid_runtime'>runtime</span>
@@ -254,12 +254,12 @@
254
254
  <pre class="lines">
255
255
 
256
256
 
257
- 7
258
- 8
259
- 9</pre>
257
+ 9
258
+ 10
259
+ 11</pre>
260
260
  </td>
261
261
  <td>
262
- <pre class="code"><span class="info file"># File 'lib/ovto/wired_actions.rb', line 7</span>
262
+ <pre class="code"><span class="info file"># File 'lib/ovto/wired_actions.rb', line 9</span>
263
263
 
264
264
  <span class='kw'>def</span> <span class='id identifier rubyid_method_missing'>method_missing</span><span class='lparen'>(</span><span class='id identifier rubyid_name'>name</span><span class='comma'>,</span> <span class='id identifier rubyid_args_hash'>args_hash</span><span class='op'>=</span><span class='lbrace'>{</span><span class='rbrace'>}</span><span class='rparen'>)</span>
265
265
  <span class='id identifier rubyid_invoke_action'>invoke_action</span><span class='lparen'>(</span><span class='id identifier rubyid_name'>name</span><span class='comma'>,</span> <span class='id identifier rubyid_args_hash'>args_hash</span><span class='rparen'>)</span>
@@ -313,12 +313,12 @@
313
313
  <pre class="lines">
314
314
 
315
315
 
316
- 11
317
- 12
318
- 13</pre>
316
+ 13
317
+ 14
318
+ 15</pre>
319
319
  </td>
320
320
  <td>
321
- <pre class="code"><span class="info file"># File 'lib/ovto/wired_actions.rb', line 11</span>
321
+ <pre class="code"><span class="info file"># File 'lib/ovto/wired_actions.rb', line 13</span>
322
322
 
323
323
  <span class='kw'>def</span> <span class='id identifier rubyid_respond_to?'>respond_to?</span><span class='lparen'>(</span><span class='id identifier rubyid_name'>name</span><span class='rparen'>)</span>
324
324
  <span class='ivar'>@actions</span><span class='period'>.</span><span class='id identifier rubyid_respond_to?'>respond_to?</span><span class='lparen'>(</span><span class='id identifier rubyid_name'>name</span><span class='rparen'>)</span>
@@ -333,9 +333,9 @@
333
333
  </div>
334
334
 
335
335
  <div id="footer">
336
- Generated on Fri Jun 1 21:07:20 2018 by
336
+ Generated on Wed Nov 7 18:02:02 2018 by
337
337
  <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
338
- 0.9.12 (ruby-2.4.2).
338
+ 0.9.16 (ruby-2.5.3).
339
339
  </div>
340
340
 
341
341
  </div>
@@ -4,7 +4,7 @@
4
4
  <meta charset="utf-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
6
  <title>
7
- Documentation by YARD 0.9.12
7
+ Documentation by YARD 0.9.16
8
8
 
9
9
  </title>
10
10
 
@@ -52,7 +52,7 @@
52
52
  <div class="clear"></div>
53
53
  </div>
54
54
 
55
- <div id="content"><h1 class="noborder title">Documentation by YARD 0.9.12</h1>
55
+ <div id="content"><h1 class="noborder title">Documentation by YARD 0.9.16</h1>
56
56
  <div id="listing">
57
57
  <h1 class="alphaindex">Alphabetic Index</h1>
58
58
 
@@ -69,6 +69,8 @@
69
69
  <h2>Namespace Listing A-Z</h2>
70
70
 
71
71
 
72
+ <ul class="toplevel"><li><span class='object_link'><a href="top-level-namespace.html" title="Top Level Namespace (root)">Top Level Namespace</a></span></li></ul>
73
+
72
74
 
73
75
 
74
76
  <table>
@@ -219,9 +221,9 @@
219
221
  </div>
220
222
 
221
223
  <div id="footer">
222
- Generated on Fri Jun 1 21:07:20 2018 by
224
+ Generated on Wed Nov 7 18:02:01 2018 by
223
225
  <a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
224
- 0.9.12 (ruby-2.4.2).
226
+ 0.9.16 (ruby-2.5.3).
225
227
  </div>
226
228
 
227
229
  </div>
@@ -4,7 +4,7 @@
4
4
  <head>
5
5
  <meta charset="UTF-8">
6
6
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
7
- <title>Actions · GitBook</title>
7
+ <title>Ovto::Actions · GitBook</title>
8
8
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
9
9
  <meta name="description" content="">
10
10
  <meta name="generator" content="GitBook 3.2.3">
@@ -134,7 +134,7 @@
134
134
  <a href="app.html">
135
135
 
136
136
 
137
- App
137
+ Ovto::App
138
138
 
139
139
  </a>
140
140
 
@@ -147,7 +147,7 @@
147
147
  <a href="state.html">
148
148
 
149
149
 
150
- State
150
+ Ovto::State
151
151
 
152
152
  </a>
153
153
 
@@ -160,7 +160,7 @@
160
160
  <a href="actions.html">
161
161
 
162
162
 
163
- Actions
163
+ Ovto::Actions
164
164
 
165
165
  </a>
166
166
 
@@ -173,7 +173,20 @@
173
173
  <a href="component.html">
174
174
 
175
175
 
176
- Component
176
+ Ovto::Component
177
+
178
+ </a>
179
+
180
+
181
+
182
+ </li>
183
+
184
+ <li class="chapter " data-level="1.3.5" data-path="fetch.html">
185
+
186
+ <a href="fetch.html">
187
+
188
+
189
+ Ovto.fetch
177
190
 
178
191
  </a>
179
192
 
@@ -261,7 +274,7 @@
261
274
  <!-- Title -->
262
275
  <h1>
263
276
  <i class="fa fa-circle-o-notch fa-spin"></i>
264
- <a href=".." >Actions</a>
277
+ <a href=".." >Ovto::Actions</a>
265
278
  </h1>
266
279
  </div>
267
280
 
@@ -316,6 +329,28 @@ MyApp.run(<span class="hljs-symbol">id:</span> <span class="hljs-string">&apos;o
316
329
  </code></pre><p>Arguments are almost the same as the original but you don&apos;t need to provide <code>state</code>;
317
330
  it is automatically passed by <code>Ovto::WiredActions</code> class. It also updates the app
318
331
  state with the return value of the action, and schedules rendering the view.</p>
332
+ <h2 id="skipping-state-update">Skipping state update</h2>
333
+ <p>An action may return <code>nil</code> when no app state changes are needed.</p>
334
+ <p>Promises are also special values which does not cause state changes (see the next section).</p>
335
+ <h2 id="async-actions">Async actions</h2>
336
+ <p>When calling server apis, you cannot tell how the app state will change until the server responds.
337
+ In such cases, you can call another action via <code>actions</code> to tell Ovto to reflect the api result to the app state.</p>
338
+ <p>Example:</p>
339
+ <pre><code class="lang-rb"> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Actions</span> &lt; Ovto::Actions</span>
340
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">fetch_tasks</span><span class="hljs-params">(<span class="hljs-symbol">state:</span>)</span></span>
341
+ Ovto.fetch(<span class="hljs-string">&apos;/tasks.json&apos;</span>).<span class="hljs-keyword">then</span> {|tasks_json|
342
+ actions.receive_tasks(<span class="hljs-symbol">tasks:</span> tasks_json)
343
+ }.fail {|e|
344
+ console.log(<span class="hljs-string">&quot;failed:&quot;</span>, e)
345
+ }
346
+ <span class="hljs-keyword">end</span>
347
+
348
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">receive_tasks</span><span class="hljs-params">(<span class="hljs-symbol">state:</span>, <span class="hljs-symbol">tasks_json:</span>)</span></span>
349
+ tasks = tasks_json.map{|item| Task.new(**item)}
350
+ <span class="hljs-keyword">return</span> {<span class="hljs-symbol">tasks:</span> tasks}
351
+ <span class="hljs-keyword">end</span>
352
+ <span class="hljs-keyword">end</span>
353
+ </code></pre>
319
354
 
320
355
 
321
356
  </section>
@@ -343,12 +378,12 @@ state with the return value of the action, and schedules rendering the view.</p>
343
378
 
344
379
 
345
380
 
346
- <a href="state.html" class="navigation navigation-prev " aria-label="Previous page: State">
381
+ <a href="state.html" class="navigation navigation-prev " aria-label="Previous page: Ovto::State">
347
382
  <i class="fa fa-angle-left"></i>
348
383
  </a>
349
384
 
350
385
 
351
- <a href="component.html" class="navigation navigation-next " aria-label="Next page: Component">
386
+ <a href="component.html" class="navigation navigation-next " aria-label="Next page: Ovto::Component">
352
387
  <i class="fa fa-angle-right"></i>
353
388
  </a>
354
389
 
@@ -359,7 +394,7 @@ state with the return value of the action, and schedules rendering the view.</p>
359
394
  <script>
360
395
  var gitbook = gitbook || [];
361
396
  gitbook.push(function() {
362
- gitbook.page.hasChanged({"page":{"title":"Actions","level":"1.3.3","depth":2,"next":{"title":"Component","level":"1.3.4","depth":2,"path":"api/component.md","ref":"api/component.md","articles":[]},"previous":{"title":"State","level":"1.3.2","depth":2,"path":"api/state.md","ref":"api/state.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"api/actions.md","mtime":"2018-05-15T12:55:41.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-06-01T12:07:18.151Z"},"basePath":"..","book":{"language":""}});
397
+ gitbook.page.hasChanged({"page":{"title":"Ovto::Actions","level":"1.3.3","depth":2,"next":{"title":"Ovto::Component","level":"1.3.4","depth":2,"path":"api/component.md","ref":"api/component.md","articles":[]},"previous":{"title":"Ovto::State","level":"1.3.2","depth":2,"path":"api/state.md","ref":"api/state.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"api/actions.md","mtime":"2018-10-27T08:57:46.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-11-07T09:01:58.704Z"},"basePath":"..","book":{"language":""}});
363
398
  });
364
399
  </script>
365
400
  </div>
@@ -4,7 +4,7 @@
4
4
  <head>
5
5
  <meta charset="UTF-8">
6
6
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
7
- <title>App · GitBook</title>
7
+ <title>Ovto::App · GitBook</title>
8
8
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
9
9
  <meta name="description" content="">
10
10
  <meta name="generator" content="GitBook 3.2.3">
@@ -132,7 +132,7 @@
132
132
  <a href="app.html">
133
133
 
134
134
 
135
- App
135
+ Ovto::App
136
136
 
137
137
  </a>
138
138
 
@@ -145,7 +145,7 @@
145
145
  <a href="state.html">
146
146
 
147
147
 
148
- State
148
+ Ovto::State
149
149
 
150
150
  </a>
151
151
 
@@ -158,7 +158,7 @@
158
158
  <a href="actions.html">
159
159
 
160
160
 
161
- Actions
161
+ Ovto::Actions
162
162
 
163
163
  </a>
164
164
 
@@ -171,7 +171,20 @@
171
171
  <a href="component.html">
172
172
 
173
173
 
174
- Component
174
+ Ovto::Component
175
+
176
+ </a>
177
+
178
+
179
+
180
+ </li>
181
+
182
+ <li class="chapter " data-level="1.3.5" data-path="fetch.html">
183
+
184
+ <a href="fetch.html">
185
+
186
+
187
+ Ovto.fetch
175
188
 
176
189
  </a>
177
190
 
@@ -259,7 +272,7 @@
259
272
  <!-- Title -->
260
273
  <h1>
261
274
  <i class="fa fa-circle-o-notch fa-spin"></i>
262
- <a href=".." >App</a>
275
+ <a href=".." >Ovto::App</a>
263
276
  </h1>
264
277
  </div>
265
278
 
@@ -333,6 +346,19 @@ MyApp.run(<span class="hljs-symbol">id:</span> <span class="hljs-string">&apos;o
333
346
  <p>Here we added <code>color_idx</code> to app state and <code>update_color</code> action to change it.
334
347
  The button is updated to have the color indicated by <code>color_idx</code> and
335
348
  now has <code>onclick</code> event handler which executes the action.</p>
349
+ <h2 id="calling-actions-on-startup">Calling actions on startup</h2>
350
+ <p>To invoke certain actions on app startup, define <code>MyApp#setup</code> and use <code>MyApp#actions</code>.</p>
351
+ <p>Example:</p>
352
+ <pre><code class="lang-rb"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyApp</span> &lt; Ovto::App</span>
353
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">setup</span></span>
354
+ actions.fetch_data()
355
+ <span class="hljs-keyword">end</span>
356
+
357
+ ...
358
+ <span class="hljs-keyword">end</span>
359
+
360
+ MyApp.run(<span class="hljs-symbol">id:</span> <span class="hljs-string">&apos;ovto-view&apos;</span>)
361
+ </code></pre>
336
362
 
337
363
 
338
364
  </section>
@@ -361,7 +387,7 @@ now has <code>onclick</code> event handler which executes the action.</p>
361
387
 
362
388
 
363
389
 
364
- <a href="state.html" class="navigation navigation-next navigation-unique" aria-label="Next page: State">
390
+ <a href="state.html" class="navigation navigation-next navigation-unique" aria-label="Next page: Ovto::State">
365
391
  <i class="fa fa-angle-right"></i>
366
392
  </a>
367
393
 
@@ -372,7 +398,7 @@ now has <code>onclick</code> event handler which executes the action.</p>
372
398
  <script>
373
399
  var gitbook = gitbook || [];
374
400
  gitbook.push(function() {
375
- gitbook.page.hasChanged({"page":{"title":"App","level":"1.3.1","depth":2,"next":{"title":"State","level":"1.3.2","depth":2,"path":"api/state.md","ref":"api/state.md","articles":[]},"previous":{"title":"API","level":"1.3","depth":1,"ref":"","articles":[{"title":"App","level":"1.3.1","depth":2,"path":"api/app.md","ref":"api/app.md","articles":[]},{"title":"State","level":"1.3.2","depth":2,"path":"api/state.md","ref":"api/state.md","articles":[]},{"title":"Actions","level":"1.3.3","depth":2,"path":"api/actions.md","ref":"api/actions.md","articles":[]},{"title":"Component","level":"1.3.4","depth":2,"path":"api/component.md","ref":"api/component.md","articles":[]}]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"api/app.md","mtime":"2018-05-15T12:55:33.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-06-01T12:07:18.151Z"},"basePath":"..","book":{"language":""}});
401
+ gitbook.page.hasChanged({"page":{"title":"Ovto::App","level":"1.3.1","depth":2,"next":{"title":"Ovto::State","level":"1.3.2","depth":2,"path":"api/state.md","ref":"api/state.md","articles":[]},"previous":{"title":"API","level":"1.3","depth":1,"ref":"","articles":[{"title":"Ovto::App","level":"1.3.1","depth":2,"path":"api/app.md","ref":"api/app.md","articles":[]},{"title":"Ovto::State","level":"1.3.2","depth":2,"path":"api/state.md","ref":"api/state.md","articles":[]},{"title":"Ovto::Actions","level":"1.3.3","depth":2,"path":"api/actions.md","ref":"api/actions.md","articles":[]},{"title":"Ovto::Component","level":"1.3.4","depth":2,"path":"api/component.md","ref":"api/component.md","articles":[]},{"title":"Ovto.fetch","level":"1.3.5","depth":2,"path":"api/fetch.md","ref":"api/fetch.md","articles":[]}]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"api/app.md","mtime":"2018-10-27T08:04:24.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-11-07T09:01:58.704Z"},"basePath":"..","book":{"language":""}});
376
402
  });
377
403
  </script>
378
404
  </div>
@@ -4,7 +4,7 @@
4
4
  <head>
5
5
  <meta charset="UTF-8">
6
6
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
7
- <title>Component · GitBook</title>
7
+ <title>Ovto::Component · GitBook</title>
8
8
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
9
9
  <meta name="description" content="">
10
10
  <meta name="generator" content="GitBook 3.2.3">
@@ -57,6 +57,8 @@
57
57
  <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
58
58
 
59
59
 
60
+ <link rel="next" href="fetch.html" />
61
+
60
62
 
61
63
  <link rel="prev" href="actions.html" />
62
64
 
@@ -132,7 +134,7 @@
132
134
  <a href="app.html">
133
135
 
134
136
 
135
- App
137
+ Ovto::App
136
138
 
137
139
  </a>
138
140
 
@@ -145,7 +147,7 @@
145
147
  <a href="state.html">
146
148
 
147
149
 
148
- State
150
+ Ovto::State
149
151
 
150
152
  </a>
151
153
 
@@ -158,7 +160,7 @@
158
160
  <a href="actions.html">
159
161
 
160
162
 
161
- Actions
163
+ Ovto::Actions
162
164
 
163
165
  </a>
164
166
 
@@ -171,7 +173,20 @@
171
173
  <a href="component.html">
172
174
 
173
175
 
174
- Component
176
+ Ovto::Component
177
+
178
+ </a>
179
+
180
+
181
+
182
+ </li>
183
+
184
+ <li class="chapter " data-level="1.3.5" data-path="fetch.html">
185
+
186
+ <a href="fetch.html">
187
+
188
+
189
+ Ovto.fetch
175
190
 
176
191
  </a>
177
192
 
@@ -259,7 +274,7 @@
259
274
  <!-- Title -->
260
275
  <h1>
261
276
  <i class="fa fa-circle-o-notch fa-spin"></i>
262
- <a href=".." >Component</a>
277
+ <a href=".." >Ovto::Component</a>
263
278
  </h1>
264
279
  </div>
265
280
 
@@ -279,31 +294,33 @@
279
294
  <h2 id="render-method">&apos;render&apos; method</h2>
280
295
  <p><code>render</code> is the only method you need to define in the <code>View</code> class.
281
296
  It must take the global app state as a keyword argument <code>state:</code>.</p>
282
- <pre><code> class View &lt; Ovto::Component
283
- def render(state:)
284
- o &apos;div&apos; do
285
- o &apos;h1&apos;, &apos;Your todos&apos;
286
- o &apos;ul&apos; do
287
- state.todos.each do |todo|
288
- o &apos;li&apos;, todo.title
289
- end
290
- end
291
- end
292
- end
293
- end
294
- </code></pre><h3 id="morethanonenode-error">MoreThanOneNode error</h3>
297
+ <pre><code class="lang-rb"> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">View</span> &lt; Ovto::Component</span>
298
+ <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span><span class="hljs-params">(<span class="hljs-symbol">state:</span>)</span></span>
299
+ o <span class="hljs-string">&apos;div&apos;</span> <span class="hljs-keyword">do</span>
300
+ o <span class="hljs-string">&apos;h1&apos;</span>, <span class="hljs-string">&apos;Your todos&apos;</span>
301
+ o <span class="hljs-string">&apos;ul&apos;</span> <span class="hljs-keyword">do</span>
302
+ state.todos.each <span class="hljs-keyword">do</span> |todo|
303
+ o <span class="hljs-string">&apos;li&apos;</span>, todo.title
304
+ <span class="hljs-keyword">end</span>
305
+ <span class="hljs-keyword">end</span>
306
+ <span class="hljs-keyword">end</span>
307
+ <span class="hljs-keyword">end</span>
308
+ <span class="hljs-keyword">end</span>
309
+ </code></pre>
310
+ <h3 id="morethanonenode-error">MoreThanOneNode error</h3>
295
311
  <p>If you missed the surrounding &apos;div&apos; tag, Ovto raises an <code>MoreThanOneNode</code> error. <code>render</code> must create a single DOM node.</p>
296
- <pre><code> def render(state:)
297
- o &apos;h1&apos;, &apos;Your todos&apos;
298
- o &apos;ul&apos; do
299
- state.todos.each do |todo|
300
- o &apos;li&apos;, todo.title
301
- end
302
- end
303
- end
304
-
305
- #=&gt; $MoreThanOneNode {name: &quot;MoreThanOneNode&quot;, message: &quot;MyApp::View#render must generate a single DOM node. Please wrap the tags with a &apos;div&apos; or something.&quot;, stack: &quot;MoreThanOneNode: MyApp::View#render must generate &#x2026;opbox/proj/ovto/example/tutorial/app.js:22887:18)&quot;}
306
- </code></pre><h2 id="the-o-method">The &apos;o&apos; method</h2>
312
+ <pre><code class="lang-rb"> <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span><span class="hljs-params">(<span class="hljs-symbol">state:</span>)</span></span>
313
+ o <span class="hljs-string">&apos;h1&apos;</span>, <span class="hljs-string">&apos;Your todos&apos;</span>
314
+ o <span class="hljs-string">&apos;ul&apos;</span> <span class="hljs-keyword">do</span>
315
+ state.todos.each <span class="hljs-keyword">do</span> |todo|
316
+ o <span class="hljs-string">&apos;li&apos;</span>, todo.title
317
+ <span class="hljs-keyword">end</span>
318
+ <span class="hljs-keyword">end</span>
319
+ <span class="hljs-keyword">end</span>
320
+
321
+ <span class="hljs-comment">#=&gt; $MoreThanOneNode {name: &quot;MoreThanOneNode&quot;, message: &quot;MyApp::View#render must generate a single DOM node. Please wrap the tags with a &apos;div&apos; or something.&quot;, stack: &quot;MoreThanOneNode: MyApp::View#render must generate &#x2026;opbox/proj/ovto/example/tutorial/app.js:22887:18)&quot;}</span>
322
+ </code></pre>
323
+ <h2 id="the-o-method">The &apos;o&apos; method</h2>
307
324
  <p><a name="the-o-method"></a></p>
308
325
  <p><code>Ovto::Component#o</code> describes your app&apos;s view. For example:</p>
309
326
  <pre><code class="lang-rb">o <span class="hljs-string">&apos;div&apos;</span>
@@ -359,7 +376,8 @@ You can get the input value with <code>e.target.value</code> here.</p>
359
376
  <p><a href="https://github.com/hyperapp/hyperapp#keys" target="_blank">https://github.com/hyperapp/hyperapp#keys</a></p>
360
377
  <h2 id="sub-components">Sub components</h2>
361
378
  <p><code>o</code> can take another component class to render.</p>
362
- <pre><code class="lang-rb"> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TodoList</span> &lt; Ovto::Component</span>
379
+ <pre><code class="lang-rb"> <span class="hljs-comment"># Sub component</span>
380
+ <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TodoList</span> &lt; Ovto::Component</span>
363
381
  <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span><span class="hljs-params">(<span class="hljs-symbol">todos:</span>)</span></span>
364
382
  o <span class="hljs-string">&apos;ul&apos;</span> <span class="hljs-keyword">do</span>
365
383
  todos.each <span class="hljs-keyword">do</span> |todo|
@@ -369,6 +387,7 @@ You can get the input value with <code>e.target.value</code> here.</p>
369
387
  <span class="hljs-keyword">end</span>
370
388
  <span class="hljs-keyword">end</span>
371
389
 
390
+ <span class="hljs-comment"># Main View class</span>
372
391
  <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">View</span> &lt; Ovto::Component</span>
373
392
  <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">render</span><span class="hljs-params">(<span class="hljs-symbol">state:</span>)</span></span>
374
393
  o <span class="hljs-string">&apos;div&apos;</span> <span class="hljs-keyword">do</span>
@@ -378,11 +397,13 @@ You can get the input value with <code>e.target.value</code> here.</p>
378
397
  <span class="hljs-keyword">end</span>
379
398
  <span class="hljs-keyword">end</span>
380
399
  </code></pre>
381
- <p>Note that you cannot call <code>o</code> more than once in the <code>render</code> method of sub components too.
382
- In other words, sub component must yield a single DOM element.</p>
400
+ <p>For sub components, the <code>state:</code> keyword of <code>render</code> method is optional. </p>
383
401
  <h2 id="text-node">Text node</h2>
384
402
  <p>Sometimes you may want to create a text node.</p>
385
403
  <pre><code class="lang-rb"><span class="hljs-comment">#=&gt; &lt;div&gt;Age: &lt;span class=&apos;age&apos;&gt;12&lt;/a&gt;&lt;/div&gt;</span>
404
+ <span class="hljs-comment"># ~~~~~</span>
405
+ <span class="hljs-comment"># |</span>
406
+ <span class="hljs-comment"># +--Raw text (not enclosed by an inner tag)</span>
386
407
  </code></pre>
387
408
  <p><code>o</code> generates a text node when <code>&apos;text&apos;</code> is specified as tag name. The above
388
409
  HTML could be described like this.</p>
@@ -418,11 +439,15 @@ HTML could be described like this.</p>
418
439
 
419
440
 
420
441
 
421
- <a href="actions.html" class="navigation navigation-prev navigation-unique" aria-label="Previous page: Actions">
442
+ <a href="actions.html" class="navigation navigation-prev " aria-label="Previous page: Ovto::Actions">
422
443
  <i class="fa fa-angle-left"></i>
423
444
  </a>
424
445
 
425
446
 
447
+ <a href="fetch.html" class="navigation navigation-next " aria-label="Next page: Ovto.fetch">
448
+ <i class="fa fa-angle-right"></i>
449
+ </a>
450
+
426
451
 
427
452
 
428
453
  </div>
@@ -430,7 +455,7 @@ HTML could be described like this.</p>
430
455
  <script>
431
456
  var gitbook = gitbook || [];
432
457
  gitbook.push(function() {
433
- gitbook.page.hasChanged({"page":{"title":"Component","level":"1.3.4","depth":2,"next":{"title":"Guides","level":"1.4","depth":1,"ref":"","articles":[{"title":"Debugging","level":"1.4.1","depth":2,"path":"guides/debugging.md","ref":"guides/debugging.md","articles":[]},{"title":"Development","level":"1.4.2","depth":2,"path":"guides/development.md","ref":"guides/development.md","articles":[]}]},"previous":{"title":"Actions","level":"1.3.3","depth":2,"path":"api/actions.md","ref":"api/actions.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"api/component.md","mtime":"2018-06-01T12:05:28.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-06-01T12:07:18.151Z"},"basePath":"..","book":{"language":""}});
458
+ gitbook.page.hasChanged({"page":{"title":"Ovto::Component","level":"1.3.4","depth":2,"next":{"title":"Ovto.fetch","level":"1.3.5","depth":2,"path":"api/fetch.md","ref":"api/fetch.md","articles":[]},"previous":{"title":"Ovto::Actions","level":"1.3.3","depth":2,"path":"api/actions.md","ref":"api/actions.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":[],"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"api/component.md","mtime":"2018-10-27T07:15:05.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-11-07T09:01:58.704Z"},"basePath":"..","book":{"language":""}});
434
459
  });
435
460
  </script>
436
461
  </div>