ovto 0.2.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 +7 -0
- data/.gitignore +1 -0
- data/.gitmodules +3 -0
- data/CHANGELOG.md +22 -0
- data/Gemfile +7 -0
- data/Gemfile.lock +57 -0
- data/LICENSE.txt +44 -0
- data/README.md +84 -0
- data/Rakefile +41 -0
- data/book/README.md +1 -0
- data/book/SUMMARY.md +13 -0
- data/book/api/actions.md +77 -0
- data/book/api/app.md +86 -0
- data/book/api/component.md +175 -0
- data/book/api/fetch.md +42 -0
- data/book/api/state.md +97 -0
- data/book/guides/debugging.md +23 -0
- data/book/guides/development.md +11 -0
- data/book/guides/tutorial.md +288 -0
- data/book/screenshot.png +0 -0
- data/docs/api/Ovto/Actions.html +135 -0
- data/docs/api/Ovto/App.html +531 -0
- data/docs/api/Ovto/Component/MoreThanOneNode.html +135 -0
- data/docs/api/Ovto/Component.html +350 -0
- data/docs/api/Ovto/Runtime.html +315 -0
- data/docs/api/Ovto/State/MissingValue.html +135 -0
- data/docs/api/Ovto/State/UnknownKey.html +135 -0
- data/docs/api/Ovto/State.html +699 -0
- data/docs/api/Ovto/WiredActions.html +343 -0
- data/docs/api/Ovto.html +319 -0
- data/docs/api/_index.html +229 -0
- data/docs/api/actions.html +398 -0
- data/docs/api/app.html +411 -0
- data/docs/api/class_list.html +51 -0
- data/docs/api/component.html +469 -0
- data/docs/api/css/common.css +1 -0
- data/docs/api/css/full_list.css +58 -0
- data/docs/api/css/style.css +499 -0
- data/docs/api/file.README.html +162 -0
- data/docs/api/file_list.html +56 -0
- data/docs/api/frames.html +17 -0
- data/docs/api/index.html +162 -0
- data/docs/api/js/app.js +248 -0
- data/docs/api/js/full_list.js +216 -0
- data/docs/api/js/jquery.js +4 -0
- data/docs/api/method_list.html +243 -0
- data/docs/api/state.html +430 -0
- data/docs/api/top-level-namespace.html +110 -0
- 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 +685 -0
- data/docs/gitbook/fonts/fontawesome/fontawesome-webfont.ttf +0 -0
- 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 +240 -0
- data/docs/gitbook/gitbook-plugin-fontsettings/website.css +291 -0
- data/docs/gitbook/gitbook-plugin-highlight/ebook.css +135 -0
- data/docs/gitbook/gitbook-plugin-highlight/website.css +434 -0
- data/docs/gitbook/gitbook-plugin-lunr/lunr.min.js +7 -0
- data/docs/gitbook/gitbook-plugin-lunr/search-lunr.js +59 -0
- data/docs/gitbook/gitbook-plugin-search/lunr.min.js +7 -0
- data/docs/gitbook/gitbook-plugin-search/search-engine.js +50 -0
- data/docs/gitbook/gitbook-plugin-search/search.css +35 -0
- data/docs/gitbook/gitbook-plugin-search/search.js +213 -0
- data/docs/gitbook/gitbook-plugin-sharing/buttons.js +90 -0
- data/docs/gitbook/gitbook.js +4 -0
- 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 +9 -0
- data/docs/gitbook/theme.js +4 -0
- data/docs/guides/debugging.html +355 -0
- data/docs/guides/development.html +361 -0
- data/docs/guides/tutorial.html +571 -0
- data/docs/index.html +422 -0
- data/docs/screenshot.png +0 -0
- data/docs/search_index.json +1 -0
- data/example/sinatra/Gemfile +6 -0
- data/example/sinatra/Gemfile.lock +59 -0
- data/example/sinatra/README.md +21 -0
- data/example/sinatra/app.rb +18 -0
- data/example/sinatra/config.ru +30 -0
- data/example/sinatra/ovto/app.rb +171 -0
- data/example/sinatra/public/style.css +4 -0
- data/example/sinatra/public/todomvc-app-css_index.css +376 -0
- data/example/sinatra/public/todomvc-common_base.css +141 -0
- data/example/sinatra/views/index.erb +21 -0
- data/example/static/Gemfile +3 -0
- data/example/static/Gemfile.lock +30 -0
- data/example/static/README.md +10 -0
- data/example/static/Rakefile +4 -0
- data/example/static/app.js +24808 -0
- data/example/static/app.rb +43 -0
- data/example/static/index.html +11 -0
- data/lib/ovto/actions.rb +10 -0
- data/lib/ovto/app.rb +58 -0
- data/lib/ovto/component.rb +191 -0
- data/lib/ovto/fetch.rb +53 -0
- data/lib/ovto/runtime.rb +388 -0
- data/lib/ovto/state.rb +69 -0
- data/lib/ovto/version.rb +3 -0
- data/lib/ovto/wired_actions.rb +33 -0
- data/lib/ovto.rb +50 -0
- data/ovto.gemspec +22 -0
- data/screenshot.png +0 -0
- metadata +161 -0
|
@@ -0,0 +1,229 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>
|
|
7
|
+
Documentation by YARD 0.9.12
|
|
8
|
+
|
|
9
|
+
</title>
|
|
10
|
+
|
|
11
|
+
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
|
|
12
|
+
|
|
13
|
+
<link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8" />
|
|
14
|
+
|
|
15
|
+
<script type="text/javascript" charset="utf-8">
|
|
16
|
+
pathId = null;
|
|
17
|
+
relpath = '';
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
|
|
22
|
+
|
|
23
|
+
<script type="text/javascript" charset="utf-8" src="js/app.js"></script>
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
</head>
|
|
27
|
+
<body>
|
|
28
|
+
<div class="nav_wrap">
|
|
29
|
+
<iframe id="nav" src="class_list.html?1"></iframe>
|
|
30
|
+
<div id="resizer"></div>
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
<div id="main" tabindex="-1">
|
|
34
|
+
<div id="header">
|
|
35
|
+
<div id="menu">
|
|
36
|
+
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<div id="search">
|
|
40
|
+
|
|
41
|
+
<a class="full_list_link" id="class_list_link"
|
|
42
|
+
href="class_list.html">
|
|
43
|
+
|
|
44
|
+
<svg width="24" height="24">
|
|
45
|
+
<rect x="0" y="4" width="24" height="4" rx="1" ry="1"></rect>
|
|
46
|
+
<rect x="0" y="12" width="24" height="4" rx="1" ry="1"></rect>
|
|
47
|
+
<rect x="0" y="20" width="24" height="4" rx="1" ry="1"></rect>
|
|
48
|
+
</svg>
|
|
49
|
+
</a>
|
|
50
|
+
|
|
51
|
+
</div>
|
|
52
|
+
<div class="clear"></div>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<div id="content"><h1 class="noborder title">Documentation by YARD 0.9.12</h1>
|
|
56
|
+
<div id="listing">
|
|
57
|
+
<h1 class="alphaindex">Alphabetic Index</h1>
|
|
58
|
+
|
|
59
|
+
<h2>File Listing</h2>
|
|
60
|
+
<ul id="files" class="index_inline_list">
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
<li class="r1"><a href="index.html" title="README">README</a></li>
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
</ul>
|
|
67
|
+
|
|
68
|
+
<div class="clear"></div>
|
|
69
|
+
<h2>Namespace Listing A-Z</h2>
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
<table>
|
|
75
|
+
<tr>
|
|
76
|
+
<td valign='top' width="33%">
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
<ul id="alpha_A" class="alpha">
|
|
80
|
+
<li class="letter">A</li>
|
|
81
|
+
<ul>
|
|
82
|
+
|
|
83
|
+
<li>
|
|
84
|
+
<span class='object_link'><a href="Ovto/Actions.html" title="Ovto::Actions (class)">Actions</a></span>
|
|
85
|
+
|
|
86
|
+
<small>(Ovto)</small>
|
|
87
|
+
|
|
88
|
+
</li>
|
|
89
|
+
|
|
90
|
+
<li>
|
|
91
|
+
<span class='object_link'><a href="Ovto/App.html" title="Ovto::App (class)">App</a></span>
|
|
92
|
+
|
|
93
|
+
<small>(Ovto)</small>
|
|
94
|
+
|
|
95
|
+
</li>
|
|
96
|
+
|
|
97
|
+
</ul>
|
|
98
|
+
</ul>
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
<ul id="alpha_C" class="alpha">
|
|
102
|
+
<li class="letter">C</li>
|
|
103
|
+
<ul>
|
|
104
|
+
|
|
105
|
+
<li>
|
|
106
|
+
<span class='object_link'><a href="Ovto/Component.html" title="Ovto::Component (class)">Component</a></span>
|
|
107
|
+
|
|
108
|
+
<small>(Ovto)</small>
|
|
109
|
+
|
|
110
|
+
</li>
|
|
111
|
+
|
|
112
|
+
</ul>
|
|
113
|
+
</ul>
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
<ul id="alpha_M" class="alpha">
|
|
117
|
+
<li class="letter">M</li>
|
|
118
|
+
<ul>
|
|
119
|
+
|
|
120
|
+
<li>
|
|
121
|
+
<span class='object_link'><a href="Ovto/State/MissingValue.html" title="Ovto::State::MissingValue (class)">MissingValue</a></span>
|
|
122
|
+
|
|
123
|
+
<small>(Ovto::State)</small>
|
|
124
|
+
|
|
125
|
+
</li>
|
|
126
|
+
|
|
127
|
+
<li>
|
|
128
|
+
<span class='object_link'><a href="Ovto/Component/MoreThanOneNode.html" title="Ovto::Component::MoreThanOneNode (class)">MoreThanOneNode</a></span>
|
|
129
|
+
|
|
130
|
+
<small>(Ovto::Component)</small>
|
|
131
|
+
|
|
132
|
+
</li>
|
|
133
|
+
|
|
134
|
+
</ul>
|
|
135
|
+
</ul>
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
<ul id="alpha_O" class="alpha">
|
|
139
|
+
<li class="letter">O</li>
|
|
140
|
+
<ul>
|
|
141
|
+
|
|
142
|
+
<li>
|
|
143
|
+
<span class='object_link'><a href="Ovto.html" title="Ovto (module)">Ovto</a></span>
|
|
144
|
+
|
|
145
|
+
</li>
|
|
146
|
+
|
|
147
|
+
</ul>
|
|
148
|
+
</ul>
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
<ul id="alpha_R" class="alpha">
|
|
152
|
+
<li class="letter">R</li>
|
|
153
|
+
<ul>
|
|
154
|
+
|
|
155
|
+
<li>
|
|
156
|
+
<span class='object_link'><a href="Ovto/Runtime.html" title="Ovto::Runtime (class)">Runtime</a></span>
|
|
157
|
+
|
|
158
|
+
<small>(Ovto)</small>
|
|
159
|
+
|
|
160
|
+
</li>
|
|
161
|
+
|
|
162
|
+
</ul>
|
|
163
|
+
</ul>
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
<ul id="alpha_S" class="alpha">
|
|
167
|
+
<li class="letter">S</li>
|
|
168
|
+
<ul>
|
|
169
|
+
|
|
170
|
+
<li>
|
|
171
|
+
<span class='object_link'><a href="Ovto/State.html" title="Ovto::State (class)">State</a></span>
|
|
172
|
+
|
|
173
|
+
<small>(Ovto)</small>
|
|
174
|
+
|
|
175
|
+
</li>
|
|
176
|
+
|
|
177
|
+
</ul>
|
|
178
|
+
</ul>
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
<ul id="alpha_U" class="alpha">
|
|
182
|
+
<li class="letter">U</li>
|
|
183
|
+
<ul>
|
|
184
|
+
|
|
185
|
+
<li>
|
|
186
|
+
<span class='object_link'><a href="Ovto/State/UnknownKey.html" title="Ovto::State::UnknownKey (class)">UnknownKey</a></span>
|
|
187
|
+
|
|
188
|
+
<small>(Ovto::State)</small>
|
|
189
|
+
|
|
190
|
+
</li>
|
|
191
|
+
|
|
192
|
+
</ul>
|
|
193
|
+
</ul>
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
</td><td valign='top' width="33%">
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
<ul id="alpha_W" class="alpha">
|
|
200
|
+
<li class="letter">W</li>
|
|
201
|
+
<ul>
|
|
202
|
+
|
|
203
|
+
<li>
|
|
204
|
+
<span class='object_link'><a href="Ovto/WiredActions.html" title="Ovto::WiredActions (class)">WiredActions</a></span>
|
|
205
|
+
|
|
206
|
+
<small>(Ovto)</small>
|
|
207
|
+
|
|
208
|
+
</li>
|
|
209
|
+
|
|
210
|
+
</ul>
|
|
211
|
+
</ul>
|
|
212
|
+
|
|
213
|
+
</td>
|
|
214
|
+
</tr>
|
|
215
|
+
</table>
|
|
216
|
+
|
|
217
|
+
</div>
|
|
218
|
+
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
<div id="footer">
|
|
222
|
+
Generated on Fri Jun 1 21:07:20 2018 by
|
|
223
|
+
<a href="http://yardoc.org" title="Yay! A Ruby Documentation Tool" target="_parent">yard</a>
|
|
224
|
+
0.9.12 (ruby-2.4.2).
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
</div>
|
|
228
|
+
</body>
|
|
229
|
+
</html>
|
|
@@ -0,0 +1,398 @@
|
|
|
1
|
+
|
|
2
|
+
<!DOCTYPE HTML>
|
|
3
|
+
<html lang="" >
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
7
|
+
<title>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.3">
|
|
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
|
+
|
|
81
|
+
|
|
82
|
+
<ul class="summary">
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
<li class="chapter " data-level="1.1" data-path="../">
|
|
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" >
|
|
119
|
+
|
|
120
|
+
<span>
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
API
|
|
124
|
+
|
|
125
|
+
</span>
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
<ul class="articles">
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
<li class="chapter " data-level="1.3.1" data-path="app.html">
|
|
133
|
+
|
|
134
|
+
<a href="app.html">
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
App
|
|
138
|
+
|
|
139
|
+
</a>
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
</li>
|
|
144
|
+
|
|
145
|
+
<li class="chapter " data-level="1.3.2" data-path="state.html">
|
|
146
|
+
|
|
147
|
+
<a href="state.html">
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
State
|
|
151
|
+
|
|
152
|
+
</a>
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
</li>
|
|
157
|
+
|
|
158
|
+
<li class="chapter active" data-level="1.3.3" data-path="actions.html">
|
|
159
|
+
|
|
160
|
+
<a href="actions.html">
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
Actions
|
|
164
|
+
|
|
165
|
+
</a>
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
</li>
|
|
170
|
+
|
|
171
|
+
<li class="chapter " data-level="1.3.4" data-path="component.html">
|
|
172
|
+
|
|
173
|
+
<a href="component.html">
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
Component
|
|
177
|
+
|
|
178
|
+
</a>
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
</li>
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
</ul>
|
|
186
|
+
|
|
187
|
+
</li>
|
|
188
|
+
|
|
189
|
+
<li class="chapter " data-level="1.4" >
|
|
190
|
+
|
|
191
|
+
<span>
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
Guides
|
|
195
|
+
|
|
196
|
+
</span>
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
|
|
200
|
+
<ul class="articles">
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
<li class="chapter " data-level="1.4.1" data-path="../guides/debugging.html">
|
|
204
|
+
|
|
205
|
+
<a href="../guides/debugging.html">
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
Debugging
|
|
209
|
+
|
|
210
|
+
</a>
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
|
|
214
|
+
</li>
|
|
215
|
+
|
|
216
|
+
<li class="chapter " data-level="1.4.2" data-path="../guides/development.html">
|
|
217
|
+
|
|
218
|
+
<a href="../guides/development.html">
|
|
219
|
+
|
|
220
|
+
|
|
221
|
+
Development
|
|
222
|
+
|
|
223
|
+
</a>
|
|
224
|
+
|
|
225
|
+
|
|
226
|
+
|
|
227
|
+
</li>
|
|
228
|
+
|
|
229
|
+
|
|
230
|
+
</ul>
|
|
231
|
+
|
|
232
|
+
</li>
|
|
233
|
+
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
|
|
237
|
+
<li class="divider"></li>
|
|
238
|
+
|
|
239
|
+
<li>
|
|
240
|
+
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
|
|
241
|
+
Published with GitBook
|
|
242
|
+
</a>
|
|
243
|
+
</li>
|
|
244
|
+
</ul>
|
|
245
|
+
|
|
246
|
+
|
|
247
|
+
</nav>
|
|
248
|
+
|
|
249
|
+
|
|
250
|
+
</div>
|
|
251
|
+
|
|
252
|
+
<div class="book-body">
|
|
253
|
+
|
|
254
|
+
<div class="body-inner">
|
|
255
|
+
|
|
256
|
+
|
|
257
|
+
|
|
258
|
+
<div class="book-header" role="navigation">
|
|
259
|
+
|
|
260
|
+
|
|
261
|
+
<!-- Title -->
|
|
262
|
+
<h1>
|
|
263
|
+
<i class="fa fa-circle-o-notch fa-spin"></i>
|
|
264
|
+
<a href=".." >Actions</a>
|
|
265
|
+
</h1>
|
|
266
|
+
</div>
|
|
267
|
+
|
|
268
|
+
|
|
269
|
+
|
|
270
|
+
|
|
271
|
+
<div class="page-wrapper" tabindex="-1" role="main">
|
|
272
|
+
<div class="page-inner">
|
|
273
|
+
|
|
274
|
+
<div id="book-search-results">
|
|
275
|
+
<div class="search-noresults">
|
|
276
|
+
|
|
277
|
+
<section class="normal markdown-section">
|
|
278
|
+
|
|
279
|
+
<h1 id="ovtoactions">Ovto::Actions</h1>
|
|
280
|
+
<p>Actions are the only way to change the state. Actions must be defined as methods of
|
|
281
|
+
the <code>Actions</code> class. Here is some more conventions:</p>
|
|
282
|
+
<ul>
|
|
283
|
+
<li>You must use keyword arguments</li>
|
|
284
|
+
<li>You must provide <code>state:</code> keyword to receive the app state</li>
|
|
285
|
+
<li>You must return state updates as a Hash. It will be merged into the app state.</li>
|
|
286
|
+
</ul>
|
|
287
|
+
<p>Example:</p>
|
|
288
|
+
<pre><code class="lang-rb"><span class="hljs-keyword">require</span> <span class="hljs-string">'opal'</span>
|
|
289
|
+
<span class="hljs-keyword">require</span> <span class="hljs-string">'ovto'</span>
|
|
290
|
+
|
|
291
|
+
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyApp</span> < Ovto::App</span>
|
|
292
|
+
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">State</span> < Ovto::State</span>
|
|
293
|
+
item <span class="hljs-symbol">:count</span>, <span class="hljs-number">0</span>
|
|
294
|
+
<span class="hljs-keyword">end</span>
|
|
295
|
+
|
|
296
|
+
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Actions</span> < Ovto::Actions</span>
|
|
297
|
+
<span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">increment</span><span class="hljs-params">(<span class="hljs-symbol">state:</span>, <span class="hljs-symbol">by:</span>)</span></span>
|
|
298
|
+
<span class="hljs-keyword">return</span> {<span class="hljs-symbol">count:</span> state.count + by}
|
|
299
|
+
<span class="hljs-keyword">end</span>
|
|
300
|
+
<span class="hljs-keyword">end</span>
|
|
301
|
+
|
|
302
|
+
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">View</span> < Ovto::Component</span>
|
|
303
|
+
<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>
|
|
304
|
+
o <span class="hljs-string">'span'</span>, state.count
|
|
305
|
+
o <span class="hljs-string">'button'</span>, <span class="hljs-symbol">onclick:</span> ->{ actions.increment(<span class="hljs-symbol">by:</span> <span class="hljs-number">1</span>) }
|
|
306
|
+
<span class="hljs-keyword">end</span>
|
|
307
|
+
<span class="hljs-keyword">end</span>
|
|
308
|
+
<span class="hljs-keyword">end</span>
|
|
309
|
+
|
|
310
|
+
MyApp.run(<span class="hljs-symbol">id:</span> <span class="hljs-string">'ovto-view'</span>)
|
|
311
|
+
</code></pre>
|
|
312
|
+
<h2 id="calling-actions">Calling actions</h2>
|
|
313
|
+
<p>Actions can be called from components via <code>actions</code> method. This is an instance of
|
|
314
|
+
<code>Ovto::WiredActions</code> and has methods of the same name as your <code>Actions</code> class.</p>
|
|
315
|
+
<pre><code> o 'button', onclick: ->{ actions.increment(by: 1) }
|
|
316
|
+
</code></pre><p>Arguments are almost the same as the original but you don't need to provide <code>state</code>;
|
|
317
|
+
it is automatically passed by <code>Ovto::WiredActions</code> class. It also updates the app
|
|
318
|
+
state with the return value of the action, and schedules rendering the view.</p>
|
|
319
|
+
|
|
320
|
+
|
|
321
|
+
</section>
|
|
322
|
+
|
|
323
|
+
</div>
|
|
324
|
+
<div class="search-results">
|
|
325
|
+
<div class="has-results">
|
|
326
|
+
|
|
327
|
+
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
|
|
328
|
+
<ul class="search-results-list"></ul>
|
|
329
|
+
|
|
330
|
+
</div>
|
|
331
|
+
<div class="no-results">
|
|
332
|
+
|
|
333
|
+
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
|
|
334
|
+
|
|
335
|
+
</div>
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
|
|
339
|
+
</div>
|
|
340
|
+
</div>
|
|
341
|
+
|
|
342
|
+
</div>
|
|
343
|
+
|
|
344
|
+
|
|
345
|
+
|
|
346
|
+
<a href="state.html" class="navigation navigation-prev " aria-label="Previous page: State">
|
|
347
|
+
<i class="fa fa-angle-left"></i>
|
|
348
|
+
</a>
|
|
349
|
+
|
|
350
|
+
|
|
351
|
+
<a href="component.html" class="navigation navigation-next " aria-label="Next page: Component">
|
|
352
|
+
<i class="fa fa-angle-right"></i>
|
|
353
|
+
</a>
|
|
354
|
+
|
|
355
|
+
|
|
356
|
+
|
|
357
|
+
</div>
|
|
358
|
+
|
|
359
|
+
<script>
|
|
360
|
+
var gitbook = gitbook || [];
|
|
361
|
+
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":""}});
|
|
363
|
+
});
|
|
364
|
+
</script>
|
|
365
|
+
</div>
|
|
366
|
+
|
|
367
|
+
|
|
368
|
+
<script src="../gitbook/gitbook.js"></script>
|
|
369
|
+
<script src="../gitbook/theme.js"></script>
|
|
370
|
+
|
|
371
|
+
|
|
372
|
+
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
|
|
373
|
+
|
|
374
|
+
|
|
375
|
+
|
|
376
|
+
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
|
|
377
|
+
|
|
378
|
+
|
|
379
|
+
|
|
380
|
+
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
|
|
381
|
+
|
|
382
|
+
|
|
383
|
+
|
|
384
|
+
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
|
|
385
|
+
|
|
386
|
+
|
|
387
|
+
|
|
388
|
+
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
|
|
389
|
+
|
|
390
|
+
|
|
391
|
+
|
|
392
|
+
<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
|
|
393
|
+
|
|
394
|
+
|
|
395
|
+
|
|
396
|
+
</body>
|
|
397
|
+
</html>
|
|
398
|
+
|