ovto 0.6.2 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +4 -0
- data/Gemfile.lock +15 -16
- data/Rakefile +2 -9
- data/book/SUMMARY.md +15 -11
- data/book/book.toml +10 -0
- data/docs/.nojekyll +1 -0
- data/docs/404.html +189 -0
- data/docs/FontAwesome/css/font-awesome.css +4 -0
- data/docs/FontAwesome/fonts/FontAwesome.ttf +0 -0
- data/docs/FontAwesome/fonts/fontawesome-webfont.eot +0 -0
- data/docs/FontAwesome/fonts/fontawesome-webfont.svg +2671 -0
- data/docs/{gitbook/fonts/fontawesome → FontAwesome/fonts}/fontawesome-webfont.ttf +0 -0
- data/docs/FontAwesome/fonts/fontawesome-webfont.woff +0 -0
- data/docs/FontAwesome/fonts/fontawesome-webfont.woff2 +0 -0
- data/docs/api/Array.html +4 -4
- data/docs/api/Hash.html +4 -4
- data/docs/api/MightyInspect.html +238 -0
- data/docs/api/Ovto/Actions.html +4 -4
- data/docs/api/Ovto/App.html +4 -4
- data/docs/api/Ovto/Component/MoreThanOneNode.html +5 -5
- data/docs/api/Ovto/Component.html +4 -4
- data/docs/api/Ovto/Middleware/Actions.html +4 -4
- data/docs/api/Ovto/Middleware/Base.html +5 -5
- data/docs/api/Ovto/Middleware/Component.html +5 -5
- data/docs/api/Ovto/Middleware.html +8 -8
- data/docs/api/Ovto/PureComponent/StateIsNotAvailable.html +4 -4
- data/docs/api/Ovto/PureComponent.html +4 -4
- data/docs/api/Ovto/Runtime.html +4 -4
- data/docs/api/Ovto/State/MissingValue.html +4 -4
- data/docs/api/Ovto/State/UnknownStateKey.html +4 -4
- data/docs/api/Ovto/State.html +12 -12
- data/docs/api/Ovto/WiredActionSet.html +4 -4
- data/docs/api/Ovto/WiredActions.html +4 -4
- data/docs/api/Ovto.html +8 -8
- data/docs/api/_index.html +5 -5
- data/docs/api/actions.html +215 -426
- data/docs/api/app.html +226 -432
- data/docs/api/component.html +268 -480
- data/docs/api/fetch.html +188 -393
- data/docs/api/file.README.html +4 -4
- data/docs/api/frames.html +1 -1
- data/docs/api/index.html +4 -4
- data/docs/api/middleware.html +249 -460
- data/docs/api/pure_component.html +186 -398
- data/docs/api/state.html +226 -438
- data/docs/api/top-level-namespace.html +4 -4
- data/docs/ayu-highlight.css +78 -0
- data/docs/book.js +688 -0
- data/docs/book.toml +10 -0
- data/docs/clipboard.min.js +7 -0
- data/docs/css/chrome.css +545 -0
- data/docs/css/general.css +203 -0
- data/docs/css/print.css +54 -0
- data/docs/css/variables.css +255 -0
- data/docs/elasticlunr.min.js +10 -0
- data/docs/favicon.png +0 -0
- data/docs/favicon.svg +22 -0
- data/docs/fonts/OPEN-SANS-LICENSE.txt +202 -0
- data/docs/fonts/SOURCE-CODE-PRO-LICENSE.txt +93 -0
- data/docs/fonts/fonts.css +100 -0
- data/docs/fonts/open-sans-v17-all-charsets-300.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-300italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-600.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-600italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-700.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-700italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-800.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-800italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-italic.woff2 +0 -0
- data/docs/fonts/open-sans-v17-all-charsets-regular.woff2 +0 -0
- data/docs/fonts/source-code-pro-v11-all-charsets-500.woff2 +0 -0
- data/docs/guides/debugging.html +184 -390
- data/docs/guides/development.html +171 -383
- data/docs/guides/install.html +206 -409
- data/docs/guides/tutorial.html +309 -525
- data/docs/highlight.css +82 -0
- data/docs/highlight.js +6 -0
- data/docs/index.html +390 -391
- data/docs/mark.min.js +7 -0
- data/docs/print.html +958 -0
- data/docs/searcher.js +483 -0
- data/docs/searchindex.js +1 -0
- data/docs/searchindex.json +1 -0
- data/docs/tomorrow-night.css +102 -0
- data/examples/sinatra/Gemfile.lock +25 -25
- data/examples/static/Gemfile.lock +8 -8
- data/lib/ovto/component.rb +2 -3
- data/lib/ovto/version.rb +1 -1
- metadata +47 -26
- data/docs/gitbook/fonts/fontawesome/FontAwesome.otf +0 -0
- data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.eot +0 -0
- data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.svg +0 -685
- data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.woff +0 -0
- data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.woff2 +0 -0
- data/docs/gitbook/gitbook-plugin-fontsettings/fontsettings.js +0 -240
- data/docs/gitbook/gitbook-plugin-fontsettings/website.css +0 -291
- data/docs/gitbook/gitbook-plugin-highlight/ebook.css +0 -135
- data/docs/gitbook/gitbook-plugin-highlight/website.css +0 -434
- data/docs/gitbook/gitbook-plugin-lunr/lunr.min.js +0 -7
- data/docs/gitbook/gitbook-plugin-lunr/search-lunr.js +0 -59
- data/docs/gitbook/gitbook-plugin-search/lunr.min.js +0 -7
- data/docs/gitbook/gitbook-plugin-search/search-engine.js +0 -50
- data/docs/gitbook/gitbook-plugin-search/search.css +0 -35
- data/docs/gitbook/gitbook-plugin-search/search.js +0 -213
- data/docs/gitbook/gitbook-plugin-sharing/buttons.js +0 -90
- data/docs/gitbook/gitbook.js +0 -4
- data/docs/gitbook/images/apple-touch-icon-precomposed-152.png +0 -0
- data/docs/gitbook/images/favicon.ico +0 -0
- data/docs/gitbook/style.css +0 -9
- data/docs/gitbook/theme.js +0 -4
- data/docs/search_index.json +0 -1
data/docs/api/actions.html
CHANGED
@@ -1,334 +1,150 @@
|
|
1
|
-
|
2
1
|
<!DOCTYPE HTML>
|
3
|
-
<html lang="" >
|
2
|
+
<html lang="en" class="sidebar-visible no-js light">
|
4
3
|
<head>
|
4
|
+
<!-- Book generated using mdBook -->
|
5
5
|
<meta charset="UTF-8">
|
6
|
-
<
|
7
|
-
<title>Ovto::Actions · GitBook</title>
|
8
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
9
|
-
<meta name="description" content="">
|
10
|
-
<meta name="generator" content="GitBook 3.2.2">
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
<link rel="stylesheet" href="../gitbook/style.css">
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
<link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
<meta name="HandheldFriendly" content="true"/>
|
53
|
-
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
54
|
-
<meta name="apple-mobile-web-app-capable" content="yes">
|
55
|
-
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
56
|
-
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
|
57
|
-
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
|
58
|
-
|
59
|
-
|
60
|
-
<link rel="next" href="component.html" />
|
61
|
-
|
62
|
-
|
63
|
-
<link rel="prev" href="state.html" />
|
64
|
-
|
65
|
-
|
66
|
-
</head>
|
67
|
-
<body>
|
68
|
-
|
69
|
-
<div class="book">
|
70
|
-
<div class="book-summary">
|
71
|
-
|
72
|
-
|
73
|
-
<div id="book-search-input" role="search">
|
74
|
-
<input type="text" placeholder="Type to search" />
|
75
|
-
</div>
|
76
|
-
|
77
|
-
|
78
|
-
<nav role="navigation">
|
79
|
-
|
80
|
-
|
6
|
+
<title>Ovto::Actions - Ovto Reference Manual</title>
|
81
7
|
|
82
|
-
<ul class="summary">
|
83
|
-
|
84
|
-
|
85
8
|
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
9
|
+
<!-- Custom HTML head -->
|
90
10
|
|
91
|
-
|
92
|
-
<
|
93
|
-
|
94
|
-
<a href="../">
|
95
|
-
|
96
|
-
|
97
|
-
Introduction
|
98
|
-
|
99
|
-
</a>
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
</li>
|
104
|
-
|
105
|
-
<li class="chapter " data-level="1.2" data-path="../guides/tutorial.html">
|
106
|
-
|
107
|
-
<a href="../guides/tutorial.html">
|
108
|
-
|
109
|
-
|
110
|
-
Getting Started
|
111
|
-
|
112
|
-
</a>
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
</li>
|
117
|
-
|
118
|
-
<li class="chapter " data-level="1.3" data-path="../guides/install.html">
|
119
|
-
|
120
|
-
<a href="../guides/install.html">
|
121
|
-
|
122
|
-
|
123
|
-
Install
|
124
|
-
|
125
|
-
</a>
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
</li>
|
130
|
-
|
131
|
-
<li class="chapter " data-level="1.4" >
|
132
|
-
|
133
|
-
<span>
|
134
|
-
|
135
|
-
|
136
|
-
API
|
137
|
-
|
138
|
-
</span>
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
<ul class="articles">
|
143
|
-
|
144
|
-
|
145
|
-
<li class="chapter " data-level="1.4.1" data-path="app.html">
|
146
|
-
|
147
|
-
<a href="app.html">
|
148
|
-
|
149
|
-
|
150
|
-
Ovto::App
|
151
|
-
|
152
|
-
</a>
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
</li>
|
157
|
-
|
158
|
-
<li class="chapter " data-level="1.4.2" data-path="state.html">
|
159
|
-
|
160
|
-
<a href="state.html">
|
161
|
-
|
162
|
-
|
163
|
-
Ovto::State
|
164
|
-
|
165
|
-
</a>
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
</li>
|
170
|
-
|
171
|
-
<li class="chapter active" data-level="1.4.3" data-path="actions.html">
|
172
|
-
|
173
|
-
<a href="actions.html">
|
174
|
-
|
175
|
-
|
176
|
-
Ovto::Actions
|
177
|
-
|
178
|
-
</a>
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
</li>
|
183
|
-
|
184
|
-
<li class="chapter " data-level="1.4.4" data-path="component.html">
|
185
|
-
|
186
|
-
<a href="component.html">
|
187
|
-
|
188
|
-
|
189
|
-
Ovto::Component
|
190
|
-
|
191
|
-
</a>
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
</li>
|
196
|
-
|
197
|
-
<li class="chapter " data-level="1.4.5" data-path="pure_component.html">
|
198
|
-
|
199
|
-
<a href="pure_component.html">
|
200
|
-
|
201
|
-
|
202
|
-
Ovto::PureComponent
|
203
|
-
|
204
|
-
</a>
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
</li>
|
209
|
-
|
210
|
-
<li class="chapter " data-level="1.4.6" data-path="middleware.html">
|
211
|
-
|
212
|
-
<a href="middleware.html">
|
213
|
-
|
214
|
-
|
215
|
-
Ovto::Middleware
|
216
|
-
|
217
|
-
</a>
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
</li>
|
222
|
-
|
223
|
-
<li class="chapter " data-level="1.4.7" data-path="fetch.html">
|
224
|
-
|
225
|
-
<a href="fetch.html">
|
226
|
-
|
227
|
-
|
228
|
-
Ovto.fetch
|
229
|
-
|
230
|
-
</a>
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
</li>
|
235
|
-
|
236
|
-
|
237
|
-
</ul>
|
238
|
-
|
239
|
-
</li>
|
240
|
-
|
241
|
-
<li class="chapter " data-level="1.5" >
|
242
|
-
|
243
|
-
<span>
|
244
|
-
|
245
|
-
|
246
|
-
Guides
|
247
|
-
|
248
|
-
</span>
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
<ul class="articles">
|
253
|
-
|
254
|
-
|
255
|
-
<li class="chapter " data-level="1.5.1" data-path="../guides/debugging.html">
|
256
|
-
|
257
|
-
<a href="../guides/debugging.html">
|
258
|
-
|
259
|
-
|
260
|
-
Debugging
|
261
|
-
|
262
|
-
</a>
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
</li>
|
267
|
-
|
268
|
-
<li class="chapter " data-level="1.5.2" data-path="../guides/development.html">
|
269
|
-
|
270
|
-
<a href="../guides/development.html">
|
271
|
-
|
272
|
-
|
273
|
-
Development
|
274
|
-
|
275
|
-
</a>
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
</li>
|
280
|
-
|
281
|
-
|
282
|
-
</ul>
|
283
|
-
|
284
|
-
</li>
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
<li class="divider"></li>
|
290
|
-
|
291
|
-
<li>
|
292
|
-
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
|
293
|
-
Published with GitBook
|
294
|
-
</a>
|
295
|
-
</li>
|
296
|
-
</ul>
|
297
|
-
|
11
|
+
<meta name="description" content="">
|
12
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
13
|
+
<meta name="theme-color" content="#ffffff" />
|
298
14
|
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
15
|
+
<link rel="icon" href="../favicon.svg">
|
16
|
+
<link rel="shortcut icon" href="../favicon.png">
|
17
|
+
<link rel="stylesheet" href="../css/variables.css">
|
18
|
+
<link rel="stylesheet" href="../css/general.css">
|
19
|
+
<link rel="stylesheet" href="../css/chrome.css">
|
20
|
+
<link rel="stylesheet" href="../css/print.css" media="print">
|
303
21
|
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
22
|
+
<!-- Fonts -->
|
23
|
+
<link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
|
24
|
+
<link rel="stylesheet" href="../fonts/fonts.css">
|
309
25
|
|
310
|
-
|
311
|
-
|
26
|
+
<!-- Highlight.js Stylesheets -->
|
27
|
+
<link rel="stylesheet" href="../highlight.css">
|
28
|
+
<link rel="stylesheet" href="../tomorrow-night.css">
|
29
|
+
<link rel="stylesheet" href="../ayu-highlight.css">
|
312
30
|
|
313
|
-
|
314
|
-
<h1>
|
315
|
-
<i class="fa fa-circle-o-notch fa-spin"></i>
|
316
|
-
<a href=".." >Ovto::Actions</a>
|
317
|
-
</h1>
|
318
|
-
</div>
|
31
|
+
<!-- Custom theme stylesheets -->
|
319
32
|
|
33
|
+
</head>
|
34
|
+
<body>
|
35
|
+
<div id="body-container">
|
36
|
+
<!-- Provide site root to javascript -->
|
37
|
+
<script>
|
38
|
+
var path_to_root = "../";
|
39
|
+
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "light";
|
40
|
+
</script>
|
41
|
+
|
42
|
+
<!-- Work around some values being stored in localStorage wrapped in quotes -->
|
43
|
+
<script>
|
44
|
+
try {
|
45
|
+
var theme = localStorage.getItem('mdbook-theme');
|
46
|
+
var sidebar = localStorage.getItem('mdbook-sidebar');
|
47
|
+
|
48
|
+
if (theme.startsWith('"') && theme.endsWith('"')) {
|
49
|
+
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
|
50
|
+
}
|
51
|
+
|
52
|
+
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
|
53
|
+
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
|
54
|
+
}
|
55
|
+
} catch (e) { }
|
56
|
+
</script>
|
57
|
+
|
58
|
+
<!-- Set the theme before any content is loaded, prevents flash -->
|
59
|
+
<script>
|
60
|
+
var theme;
|
61
|
+
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
|
62
|
+
if (theme === null || theme === undefined) { theme = default_theme; }
|
63
|
+
var html = document.querySelector('html');
|
64
|
+
html.classList.remove('no-js')
|
65
|
+
html.classList.remove('light')
|
66
|
+
html.classList.add(theme);
|
67
|
+
html.classList.add('js');
|
68
|
+
</script>
|
69
|
+
|
70
|
+
<!-- Hide / unhide sidebar before it is displayed -->
|
71
|
+
<script>
|
72
|
+
var html = document.querySelector('html');
|
73
|
+
var sidebar = null;
|
74
|
+
if (document.body.clientWidth >= 1080) {
|
75
|
+
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
|
76
|
+
sidebar = sidebar || 'visible';
|
77
|
+
} else {
|
78
|
+
sidebar = 'hidden';
|
79
|
+
}
|
80
|
+
html.classList.remove('sidebar-visible');
|
81
|
+
html.classList.add("sidebar-" + sidebar);
|
82
|
+
</script>
|
83
|
+
|
84
|
+
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
85
|
+
<div class="sidebar-scrollbox">
|
86
|
+
<ol class="chapter"><li class="chapter-item expanded "><a href="../guides/tutorial.html"><strong aria-hidden="true">1.</strong> Getting Started</a></li><li class="chapter-item expanded "><a href="../guides/install.html"><strong aria-hidden="true">2.</strong> Install</a></li><li class="chapter-item expanded affix "><li class="part-title">API</li><li class="chapter-item expanded "><a href="../api/app.html"><strong aria-hidden="true">3.</strong> Ovto::App</a></li><li class="chapter-item expanded "><a href="../api/state.html"><strong aria-hidden="true">4.</strong> Ovto::State</a></li><li class="chapter-item expanded "><a href="../api/actions.html" class="active"><strong aria-hidden="true">5.</strong> Ovto::Actions</a></li><li class="chapter-item expanded "><a href="../api/component.html"><strong aria-hidden="true">6.</strong> Ovto::Component</a></li><li class="chapter-item expanded "><a href="../api/pure_component.html"><strong aria-hidden="true">7.</strong> Ovto::PureComponent</a></li><li class="chapter-item expanded "><a href="../api/middleware.html"><strong aria-hidden="true">8.</strong> Ovto::Middleware</a></li><li class="chapter-item expanded "><a href="../api/fetch.html"><strong aria-hidden="true">9.</strong> Ovto.fetch</a></li><li class="chapter-item expanded affix "><li class="part-title">Guides</li><li class="chapter-item expanded "><a href="../guides/debugging.html"><strong aria-hidden="true">10.</strong> Debugging</a></li><li class="chapter-item expanded "><a href="../guides/development.html"><strong aria-hidden="true">11.</strong> Development</a></li></ol>
|
87
|
+
</div>
|
88
|
+
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
89
|
+
</nav>
|
90
|
+
|
91
|
+
<div id="page-wrapper" class="page-wrapper">
|
92
|
+
|
93
|
+
<div class="page">
|
94
|
+
<div id="menu-bar-hover-placeholder"></div>
|
95
|
+
<div id="menu-bar" class="menu-bar sticky bordered">
|
96
|
+
<div class="left-buttons">
|
97
|
+
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
|
98
|
+
<i class="fa fa-bars"></i>
|
99
|
+
</button>
|
100
|
+
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
|
101
|
+
<i class="fa fa-paint-brush"></i>
|
102
|
+
</button>
|
103
|
+
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
|
104
|
+
<li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
|
105
|
+
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
|
106
|
+
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
|
107
|
+
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
|
108
|
+
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
|
109
|
+
</ul>
|
110
|
+
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
|
111
|
+
<i class="fa fa-search"></i>
|
112
|
+
</button>
|
113
|
+
</div>
|
320
114
|
|
115
|
+
<h1 class="menu-title">Ovto Reference Manual</h1>
|
321
116
|
|
117
|
+
<div class="right-buttons">
|
118
|
+
<a href="../print.html" title="Print this book" aria-label="Print this book">
|
119
|
+
<i id="print-button" class="fa fa-print"></i>
|
120
|
+
</a>
|
322
121
|
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
<div id="
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
122
|
+
</div>
|
123
|
+
</div>
|
124
|
+
|
125
|
+
<div id="search-wrapper" class="hidden">
|
126
|
+
<form id="searchbar-outer" class="searchbar-outer">
|
127
|
+
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
|
128
|
+
</form>
|
129
|
+
<div id="searchresults-outer" class="searchresults-outer hidden">
|
130
|
+
<div id="searchresults-header" class="searchresults-header"></div>
|
131
|
+
<ul id="searchresults">
|
132
|
+
</ul>
|
133
|
+
</div>
|
134
|
+
</div>
|
135
|
+
|
136
|
+
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
|
137
|
+
<script>
|
138
|
+
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
|
139
|
+
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
|
140
|
+
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
|
141
|
+
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
|
142
|
+
});
|
143
|
+
</script>
|
144
|
+
|
145
|
+
<div id="content" class="content">
|
146
|
+
<main>
|
147
|
+
<h1 id="ovtoactions"><a class="header" href="#ovtoactions">Ovto::Actions</a></h1>
|
332
148
|
<p>Actions are the only way to change the state. Actions must be defined as methods of
|
333
149
|
the <code>Actions</code> class. Here is some more conventions:</p>
|
334
150
|
<ul>
|
@@ -337,136 +153,109 @@ the <code>Actions</code> class. Here is some more conventions:</p>
|
|
337
153
|
<li>You can get the current state by <code>state</code> method</li>
|
338
154
|
</ul>
|
339
155
|
<p>Example:</p>
|
340
|
-
<pre><code class="
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
item
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
o
|
357
|
-
o
|
358
|
-
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
MyApp.run(
|
156
|
+
<pre><code class="language-rb">require 'opal'
|
157
|
+
require 'ovto'
|
158
|
+
|
159
|
+
class MyApp < Ovto::App
|
160
|
+
class State < Ovto::State
|
161
|
+
item :count, default: 0
|
162
|
+
end
|
163
|
+
|
164
|
+
class Actions < Ovto::Actions
|
165
|
+
def increment(by:)
|
166
|
+
return {count: state.count + by}
|
167
|
+
end
|
168
|
+
end
|
169
|
+
|
170
|
+
class MainComponent < Ovto::Component
|
171
|
+
def render
|
172
|
+
o 'span', state.count
|
173
|
+
o 'button', onclick: ->{ actions.increment(by: 1) }
|
174
|
+
end
|
175
|
+
end
|
176
|
+
end
|
177
|
+
|
178
|
+
MyApp.run(id: 'ovto')
|
363
179
|
</code></pre>
|
364
|
-
<h2 id="calling-actions">Calling actions</h2>
|
180
|
+
<h2 id="calling-actions"><a class="header" href="#calling-actions">Calling actions</a></h2>
|
365
181
|
<p>Actions can be called from components via <code>actions</code> method. This is an instance of
|
366
182
|
<code>Ovto::WiredActions</code> and has methods of the same name as your <code>Actions</code> class.</p>
|
367
|
-
<pre><code> o
|
368
|
-
</code></pre
|
183
|
+
<pre><code> o 'button', onclick: ->{ actions.increment(by: 1) }
|
184
|
+
</code></pre>
|
185
|
+
<p>Arguments are almost the same as the original but you don't need to provide <code>state</code>;
|
369
186
|
it is automatically passed by <code>Ovto::WiredActions</code> class. It also updates the app
|
370
187
|
state with the return value of the action, and schedules rendering the view.</p>
|
371
|
-
<h2 id="skipping-state-update">Skipping state update</h2>
|
188
|
+
<h2 id="skipping-state-update"><a class="header" href="#skipping-state-update">Skipping state update</a></h2>
|
372
189
|
<p>An action may return <code>nil</code> when no app state changes are needed.</p>
|
373
190
|
<p>Promises are also special values which does not cause state changes (see the next section).</p>
|
374
|
-
<h2 id="async-actions">Async actions</h2>
|
191
|
+
<h2 id="async-actions"><a class="header" href="#async-actions">Async actions</a></h2>
|
375
192
|
<p>When calling server apis, you cannot tell how the app state will change until the server responds.
|
376
193
|
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>
|
377
194
|
<p>Example:</p>
|
378
|
-
<pre><code class="
|
379
|
-
|
380
|
-
Ovto.fetch(
|
381
|
-
actions.receive_tasks(
|
195
|
+
<pre><code class="language-rb"> class Actions < Ovto::Actions
|
196
|
+
def fetch_tasks
|
197
|
+
Ovto.fetch('/tasks.json').then {|tasks_json|
|
198
|
+
actions.receive_tasks(tasks: tasks_json)
|
382
199
|
}.fail {|e|
|
383
|
-
console.log(
|
200
|
+
console.log("failed:", e)
|
384
201
|
}
|
385
|
-
|
202
|
+
end
|
386
203
|
|
387
|
-
|
204
|
+
def receive_tasks(tasks_json:)
|
388
205
|
tasks = tasks_json.map{|item| Task.new(**item)}
|
389
|
-
|
390
|
-
|
391
|
-
|
206
|
+
return {tasks: tasks}
|
207
|
+
end
|
208
|
+
end
|
392
209
|
</code></pre>
|
393
210
|
|
394
|
-
|
395
|
-
</section>
|
396
|
-
|
397
|
-
</div>
|
398
|
-
<div class="search-results">
|
399
|
-
<div class="has-results">
|
400
|
-
|
401
|
-
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
|
402
|
-
<ul class="search-results-list"></ul>
|
403
|
-
|
404
|
-
</div>
|
405
|
-
<div class="no-results">
|
406
|
-
|
407
|
-
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
|
408
|
-
|
409
|
-
</div>
|
410
|
-
</div>
|
411
|
-
</div>
|
211
|
+
</main>
|
412
212
|
|
413
|
-
|
414
|
-
|
415
|
-
|
213
|
+
<nav class="nav-wrapper" aria-label="Page navigation">
|
214
|
+
<!-- Mobile navigation buttons -->
|
215
|
+
<a rel="prev" href="../api/state.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
216
|
+
<i class="fa fa-angle-left"></i>
|
217
|
+
</a>
|
218
|
+
|
219
|
+
<a rel="next" href="../api/component.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
220
|
+
<i class="fa fa-angle-right"></i>
|
221
|
+
</a>
|
222
|
+
|
223
|
+
<div style="clear: both"></div>
|
224
|
+
</nav>
|
225
|
+
</div>
|
416
226
|
</div>
|
417
227
|
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
|
422
|
-
|
423
|
-
|
424
|
-
|
425
|
-
|
426
|
-
|
427
|
-
|
428
|
-
|
429
|
-
|
430
|
-
|
431
|
-
</div>
|
228
|
+
<nav class="nav-wide-wrapper" aria-label="Page navigation">
|
229
|
+
<a rel="prev" href="../api/state.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
|
230
|
+
<i class="fa fa-angle-left"></i>
|
231
|
+
</a>
|
232
|
+
|
233
|
+
<a rel="next" href="../api/component.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
|
234
|
+
<i class="fa fa-angle-right"></i>
|
235
|
+
</a>
|
236
|
+
</nav>
|
237
|
+
|
238
|
+
</div>
|
432
239
|
|
433
|
-
<script>
|
434
|
-
var gitbook = gitbook || [];
|
435
|
-
gitbook.push(function() {
|
436
|
-
gitbook.page.hasChanged({"page":{"title":"Ovto::Actions","level":"1.4.3","depth":2,"next":{"title":"Ovto::Component","level":"1.4.4","depth":2,"path":"api/component.md","ref":"api/component.md","articles":[]},"previous":{"title":"Ovto::State","level":"1.4.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":"2020-02-29T13:35:46.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2021-10-21T23:18:11.678Z"},"basePath":"..","book":{"language":""}});
|
437
|
-
});
|
438
|
-
</script>
|
439
|
-
</div>
|
440
240
|
|
441
|
-
|
442
|
-
<script src="../gitbook/gitbook.js"></script>
|
443
|
-
<script src="../gitbook/theme.js"></script>
|
444
|
-
|
445
|
-
|
446
|
-
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
|
451
|
-
|
452
|
-
|
453
|
-
|
454
|
-
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
|
463
|
-
|
464
|
-
|
465
|
-
|
466
|
-
<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
|
467
|
-
|
468
|
-
|
469
241
|
|
242
|
+
|
243
|
+
<script>
|
244
|
+
window.playground_copyable = true;
|
245
|
+
</script>
|
246
|
+
|
247
|
+
|
248
|
+
<script src="../elasticlunr.min.js"></script>
|
249
|
+
<script src="../mark.min.js"></script>
|
250
|
+
<script src="../searcher.js"></script>
|
251
|
+
|
252
|
+
<script src="../clipboard.min.js"></script>
|
253
|
+
<script src="../highlight.js"></script>
|
254
|
+
<script src="../book.js"></script>
|
255
|
+
|
256
|
+
<!-- Custom JS scripts -->
|
257
|
+
|
258
|
+
|
259
|
+
</div>
|
470
260
|
</body>
|
471
261
|
</html>
|
472
|
-
|