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,469 @@
|
|
|
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>Component · 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
|
+
|
|
61
|
+
<link rel="prev" href="actions.html" />
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
</head>
|
|
65
|
+
<body>
|
|
66
|
+
|
|
67
|
+
<div class="book">
|
|
68
|
+
<div class="book-summary">
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
<div id="book-search-input" role="search">
|
|
72
|
+
<input type="text" placeholder="Type to search" />
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
<nav role="navigation">
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
<ul class="summary">
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
<li class="chapter " data-level="1.1" data-path="../">
|
|
91
|
+
|
|
92
|
+
<a href="../">
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
Introduction
|
|
96
|
+
|
|
97
|
+
</a>
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
</li>
|
|
102
|
+
|
|
103
|
+
<li class="chapter " data-level="1.2" data-path="../guides/tutorial.html">
|
|
104
|
+
|
|
105
|
+
<a href="../guides/tutorial.html">
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
Getting Started
|
|
109
|
+
|
|
110
|
+
</a>
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
</li>
|
|
115
|
+
|
|
116
|
+
<li class="chapter " data-level="1.3" >
|
|
117
|
+
|
|
118
|
+
<span>
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
API
|
|
122
|
+
|
|
123
|
+
</span>
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
<ul class="articles">
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
<li class="chapter " data-level="1.3.1" data-path="app.html">
|
|
131
|
+
|
|
132
|
+
<a href="app.html">
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
App
|
|
136
|
+
|
|
137
|
+
</a>
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
</li>
|
|
142
|
+
|
|
143
|
+
<li class="chapter " data-level="1.3.2" data-path="state.html">
|
|
144
|
+
|
|
145
|
+
<a href="state.html">
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
State
|
|
149
|
+
|
|
150
|
+
</a>
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
</li>
|
|
155
|
+
|
|
156
|
+
<li class="chapter " data-level="1.3.3" data-path="actions.html">
|
|
157
|
+
|
|
158
|
+
<a href="actions.html">
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
Actions
|
|
162
|
+
|
|
163
|
+
</a>
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
</li>
|
|
168
|
+
|
|
169
|
+
<li class="chapter active" data-level="1.3.4" data-path="component.html">
|
|
170
|
+
|
|
171
|
+
<a href="component.html">
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
Component
|
|
175
|
+
|
|
176
|
+
</a>
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
</li>
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
</ul>
|
|
184
|
+
|
|
185
|
+
</li>
|
|
186
|
+
|
|
187
|
+
<li class="chapter " data-level="1.4" >
|
|
188
|
+
|
|
189
|
+
<span>
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
Guides
|
|
193
|
+
|
|
194
|
+
</span>
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
<ul class="articles">
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
<li class="chapter " data-level="1.4.1" data-path="../guides/debugging.html">
|
|
202
|
+
|
|
203
|
+
<a href="../guides/debugging.html">
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
Debugging
|
|
207
|
+
|
|
208
|
+
</a>
|
|
209
|
+
|
|
210
|
+
|
|
211
|
+
|
|
212
|
+
</li>
|
|
213
|
+
|
|
214
|
+
<li class="chapter " data-level="1.4.2" data-path="../guides/development.html">
|
|
215
|
+
|
|
216
|
+
<a href="../guides/development.html">
|
|
217
|
+
|
|
218
|
+
|
|
219
|
+
Development
|
|
220
|
+
|
|
221
|
+
</a>
|
|
222
|
+
|
|
223
|
+
|
|
224
|
+
|
|
225
|
+
</li>
|
|
226
|
+
|
|
227
|
+
|
|
228
|
+
</ul>
|
|
229
|
+
|
|
230
|
+
</li>
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
|
|
234
|
+
|
|
235
|
+
<li class="divider"></li>
|
|
236
|
+
|
|
237
|
+
<li>
|
|
238
|
+
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
|
|
239
|
+
Published with GitBook
|
|
240
|
+
</a>
|
|
241
|
+
</li>
|
|
242
|
+
</ul>
|
|
243
|
+
|
|
244
|
+
|
|
245
|
+
</nav>
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
</div>
|
|
249
|
+
|
|
250
|
+
<div class="book-body">
|
|
251
|
+
|
|
252
|
+
<div class="body-inner">
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
|
|
256
|
+
<div class="book-header" role="navigation">
|
|
257
|
+
|
|
258
|
+
|
|
259
|
+
<!-- Title -->
|
|
260
|
+
<h1>
|
|
261
|
+
<i class="fa fa-circle-o-notch fa-spin"></i>
|
|
262
|
+
<a href=".." >Component</a>
|
|
263
|
+
</h1>
|
|
264
|
+
</div>
|
|
265
|
+
|
|
266
|
+
|
|
267
|
+
|
|
268
|
+
|
|
269
|
+
<div class="page-wrapper" tabindex="-1" role="main">
|
|
270
|
+
<div class="page-inner">
|
|
271
|
+
|
|
272
|
+
<div id="book-search-results">
|
|
273
|
+
<div class="search-noresults">
|
|
274
|
+
|
|
275
|
+
<section class="normal markdown-section">
|
|
276
|
+
|
|
277
|
+
<h1 id="ovtocomponent">Ovto::Component</h1>
|
|
278
|
+
<p>Your app must have a <code>View</code> class, a subclass of <code>Ovto::Component</code>.</p>
|
|
279
|
+
<h2 id="render-method">'render' method</h2>
|
|
280
|
+
<p><code>render</code> is the only method you need to define in the <code>View</code> class.
|
|
281
|
+
It must take the global app state as a keyword argument <code>state:</code>.</p>
|
|
282
|
+
<pre><code> class View < Ovto::Component
|
|
283
|
+
def render(state:)
|
|
284
|
+
o 'div' do
|
|
285
|
+
o 'h1', 'Your todos'
|
|
286
|
+
o 'ul' do
|
|
287
|
+
state.todos.each do |todo|
|
|
288
|
+
o 'li', todo.title
|
|
289
|
+
end
|
|
290
|
+
end
|
|
291
|
+
end
|
|
292
|
+
end
|
|
293
|
+
end
|
|
294
|
+
</code></pre><h3 id="morethanonenode-error">MoreThanOneNode error</h3>
|
|
295
|
+
<p>If you missed the surrounding 'div' 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 'h1', 'Your todos'
|
|
298
|
+
o 'ul' do
|
|
299
|
+
state.todos.each do |todo|
|
|
300
|
+
o 'li', todo.title
|
|
301
|
+
end
|
|
302
|
+
end
|
|
303
|
+
end
|
|
304
|
+
|
|
305
|
+
#=> $MoreThanOneNode {name: "MoreThanOneNode", message: "MyApp::View#render must generate a single DOM node. Please wrap the tags with a 'div' or something.", stack: "MoreThanOneNode: MyApp::View#render must generate …opbox/proj/ovto/example/tutorial/app.js:22887:18)"}
|
|
306
|
+
</code></pre><h2 id="the-o-method">The 'o' method</h2>
|
|
307
|
+
<p><a name="the-o-method"></a></p>
|
|
308
|
+
<p><code>Ovto::Component#o</code> describes your app's view. For example:</p>
|
|
309
|
+
<pre><code class="lang-rb">o <span class="hljs-string">'div'</span>
|
|
310
|
+
<span class="hljs-comment">#=> <div></div></span>
|
|
311
|
+
|
|
312
|
+
o <span class="hljs-string">'div'</span>, <span class="hljs-string">'Hello.'</span>
|
|
313
|
+
<span class="hljs-comment">#=> <div>Hello.</div></span>
|
|
314
|
+
</code></pre>
|
|
315
|
+
<p>You can pass attributes with a Hash.</p>
|
|
316
|
+
<pre><code class="lang-rb">o <span class="hljs-string">'div'</span>, <span class="hljs-class"><span class="hljs-keyword">class</span>: '<span class="hljs-title">main</span>', '<span class="hljs-title">Hello</span>.'</span>
|
|
317
|
+
<span class="hljs-comment">#=> <div class='main'>Hello.</div></span>
|
|
318
|
+
</code></pre>
|
|
319
|
+
<p>There are shorthand notations for classes and ids.</p>
|
|
320
|
+
<pre><code class="lang-rb">o <span class="hljs-string">'div.main'</span>
|
|
321
|
+
<span class="hljs-comment">#=> <div class='main'>Hello.</div></span>
|
|
322
|
+
|
|
323
|
+
o <span class="hljs-string">'div#main'</span>
|
|
324
|
+
<span class="hljs-comment">#=> <div id='main'>Hello.</div></span>
|
|
325
|
+
</code></pre>
|
|
326
|
+
<p>You can also give a block to specify its content.</p>
|
|
327
|
+
<pre><code class="lang-rb">o <span class="hljs-string">'div'</span> <span class="hljs-keyword">do</span>
|
|
328
|
+
<span class="hljs-string">'Hello.'</span>
|
|
329
|
+
<span class="hljs-keyword">end</span>
|
|
330
|
+
<span class="hljs-comment">#=> <div>Hello.</div></span>
|
|
331
|
+
|
|
332
|
+
o <span class="hljs-string">'div'</span> <span class="hljs-keyword">do</span>
|
|
333
|
+
o <span class="hljs-string">'h1'</span>, <span class="hljs-string">'Hello.'</span>
|
|
334
|
+
<span class="hljs-keyword">end</span>
|
|
335
|
+
<span class="hljs-comment">#=> <div><h1>Hello.</h1></div></span>
|
|
336
|
+
</code></pre>
|
|
337
|
+
<h3 id="special-attribute-style">Special attribute: <code>style</code></h3>
|
|
338
|
+
<p><a name="special-attributes"></a></p>
|
|
339
|
+
<p>There are some special keys for the attributes Hash. <code>style:</code> key takes a hash as
|
|
340
|
+
its value and specifies styles of the tag.</p>
|
|
341
|
+
<pre><code class="lang-rb">o <span class="hljs-string">'div'</span>, <span class="hljs-symbol">style:</span> {<span class="hljs-symbol">color:</span> <span class="hljs-string">'red'</span>}, <span class="hljs-string">'Hello.'</span>
|
|
342
|
+
<span class="hljs-comment">#=> <div style='color: red;'>Hello.</div></span>
|
|
343
|
+
</code></pre>
|
|
344
|
+
<h3 id="special-attribute-onxx">Special attribute: <code>onxx</code></h3>
|
|
345
|
+
<p>An attribute starts with <code>"on"</code> specifies an event handler.</p>
|
|
346
|
+
<p>For example:</p>
|
|
347
|
+
<pre><code class="lang-rb">o <span class="hljs-string">'input'</span>, {
|
|
348
|
+
<span class="hljs-symbol">type:</span> <span class="hljs-string">'button'</span>,
|
|
349
|
+
<span class="hljs-symbol">onclick:</span> ->(e){ p e.target.value },
|
|
350
|
+
<span class="hljs-symbol">value:</span> <span class="hljs-string">'Hello.'</span>
|
|
351
|
+
}
|
|
352
|
+
</code></pre>
|
|
353
|
+
<p>The argument <code>e</code> is an instance of Opal::Native and wraps the JavaScript event object.
|
|
354
|
+
You can get the input value with <code>e.target.value</code> here.</p>
|
|
355
|
+
<h4 id="lifecycle-events">Lifecycle events</h4>
|
|
356
|
+
<p>There are special events <code>oncreate</code>, <code>onupdate</code>, <code>onremove</code>, <code>ondestroy</code>.</p>
|
|
357
|
+
<p><a href="https://github.com/hyperapp/hyperapp#lifecycle-events" target="_blank">https://github.com/hyperapp/hyperapp#lifecycle-events</a></p>
|
|
358
|
+
<h3 id="special-attribute-key">Special attribute: <code>key</code></h3>
|
|
359
|
+
<p><a href="https://github.com/hyperapp/hyperapp#keys" target="_blank">https://github.com/hyperapp/hyperapp#keys</a></p>
|
|
360
|
+
<h2 id="sub-components">Sub components</h2>
|
|
361
|
+
<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> < Ovto::Component</span>
|
|
363
|
+
<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
|
+
o <span class="hljs-string">'ul'</span> <span class="hljs-keyword">do</span>
|
|
365
|
+
todos.each <span class="hljs-keyword">do</span> |todo|
|
|
366
|
+
o <span class="hljs-string">'li'</span>, todo.title
|
|
367
|
+
<span class="hljs-keyword">end</span>
|
|
368
|
+
<span class="hljs-keyword">end</span>
|
|
369
|
+
<span class="hljs-keyword">end</span>
|
|
370
|
+
<span class="hljs-keyword">end</span>
|
|
371
|
+
|
|
372
|
+
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">View</span> < Ovto::Component</span>
|
|
373
|
+
<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
|
+
o <span class="hljs-string">'div'</span> <span class="hljs-keyword">do</span>
|
|
375
|
+
o <span class="hljs-string">'h1'</span>, <span class="hljs-string">'Your todos'</span>
|
|
376
|
+
o TodoList, <span class="hljs-symbol">todos:</span> state.todos
|
|
377
|
+
<span class="hljs-keyword">end</span>
|
|
378
|
+
<span class="hljs-keyword">end</span>
|
|
379
|
+
<span class="hljs-keyword">end</span>
|
|
380
|
+
</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>
|
|
383
|
+
<h2 id="text-node">Text node</h2>
|
|
384
|
+
<p>Sometimes you may want to create a text node.</p>
|
|
385
|
+
<pre><code class="lang-rb"><span class="hljs-comment">#=> <div>Age: <span class='age'>12</a></div></span>
|
|
386
|
+
</code></pre>
|
|
387
|
+
<p><code>o</code> generates a text node when <code>'text'</code> is specified as tag name. The above
|
|
388
|
+
HTML could be described like this.</p>
|
|
389
|
+
<pre><code class="lang-rb">o <span class="hljs-string">'div'</span> <span class="hljs-keyword">do</span>
|
|
390
|
+
o <span class="hljs-string">'text'</span>, <span class="hljs-string">'Age:'</span>
|
|
391
|
+
o <span class="hljs-string">'span'</span>, <span class="hljs-string">'12'</span>
|
|
392
|
+
<span class="hljs-keyword">end</span>
|
|
393
|
+
</code></pre>
|
|
394
|
+
|
|
395
|
+
|
|
396
|
+
</section>
|
|
397
|
+
|
|
398
|
+
</div>
|
|
399
|
+
<div class="search-results">
|
|
400
|
+
<div class="has-results">
|
|
401
|
+
|
|
402
|
+
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
|
|
403
|
+
<ul class="search-results-list"></ul>
|
|
404
|
+
|
|
405
|
+
</div>
|
|
406
|
+
<div class="no-results">
|
|
407
|
+
|
|
408
|
+
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
|
|
409
|
+
|
|
410
|
+
</div>
|
|
411
|
+
</div>
|
|
412
|
+
</div>
|
|
413
|
+
|
|
414
|
+
</div>
|
|
415
|
+
</div>
|
|
416
|
+
|
|
417
|
+
</div>
|
|
418
|
+
|
|
419
|
+
|
|
420
|
+
|
|
421
|
+
<a href="actions.html" class="navigation navigation-prev navigation-unique" aria-label="Previous page: Actions">
|
|
422
|
+
<i class="fa fa-angle-left"></i>
|
|
423
|
+
</a>
|
|
424
|
+
|
|
425
|
+
|
|
426
|
+
|
|
427
|
+
|
|
428
|
+
</div>
|
|
429
|
+
|
|
430
|
+
<script>
|
|
431
|
+
var gitbook = gitbook || [];
|
|
432
|
+
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":""}});
|
|
434
|
+
});
|
|
435
|
+
</script>
|
|
436
|
+
</div>
|
|
437
|
+
|
|
438
|
+
|
|
439
|
+
<script src="../gitbook/gitbook.js"></script>
|
|
440
|
+
<script src="../gitbook/theme.js"></script>
|
|
441
|
+
|
|
442
|
+
|
|
443
|
+
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
|
|
444
|
+
|
|
445
|
+
|
|
446
|
+
|
|
447
|
+
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
|
|
448
|
+
|
|
449
|
+
|
|
450
|
+
|
|
451
|
+
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
|
|
452
|
+
|
|
453
|
+
|
|
454
|
+
|
|
455
|
+
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
|
|
456
|
+
|
|
457
|
+
|
|
458
|
+
|
|
459
|
+
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
|
|
460
|
+
|
|
461
|
+
|
|
462
|
+
|
|
463
|
+
<script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
|
|
464
|
+
|
|
465
|
+
|
|
466
|
+
|
|
467
|
+
</body>
|
|
468
|
+
</html>
|
|
469
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/* Override this file with custom rules */
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
body {
|
|
2
|
+
margin: 0;
|
|
3
|
+
font-family: "Lucida Sans", "Lucida Grande", Verdana, Arial, sans-serif;
|
|
4
|
+
font-size: 13px;
|
|
5
|
+
height: 101%;
|
|
6
|
+
overflow-x: hidden;
|
|
7
|
+
background: #fafafa;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
h1 { padding: 12px 10px; padding-bottom: 0; margin: 0; font-size: 1.4em; }
|
|
11
|
+
.clear { clear: both; }
|
|
12
|
+
.fixed_header { position: fixed; background: #fff; width: 100%; padding-bottom: 10px; margin-top: 0; top: 0; z-index: 9999; height: 70px; }
|
|
13
|
+
#search { position: absolute; right: 5px; top: 9px; padding-left: 24px; }
|
|
14
|
+
#content.insearch #search, #content.insearch #noresults { background: url(data:image/gif;base64,R0lGODlhEAAQAPYAAP///wAAAPr6+pKSkoiIiO7u7sjIyNjY2J6engAAAI6OjsbGxjIyMlJSUuzs7KamppSUlPLy8oKCghwcHLKysqSkpJqamvT09Pj4+KioqM7OzkRERAwMDGBgYN7e3ujo6Ly8vCoqKjY2NkZGRtTU1MTExDw8PE5OTj4+PkhISNDQ0MrKylpaWrS0tOrq6nBwcKysrLi4uLq6ul5eXlxcXGJiYoaGhuDg4H5+fvz8/KKiohgYGCwsLFZWVgQEBFBQUMzMzDg4OFhYWBoaGvDw8NbW1pycnOLi4ubm5kBAQKqqqiQkJCAgIK6urnJyckpKSjQ0NGpqatLS0sDAwCYmJnx8fEJCQlRUVAoKCggICLCwsOTk5ExMTPb29ra2tmZmZmhoaNzc3KCgoBISEiIiIgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCAAAACwAAAAAEAAQAAAHaIAAgoMgIiYlg4kACxIaACEJCSiKggYMCRselwkpghGJBJEcFgsjJyoAGBmfggcNEx0flBiKDhQFlIoCCA+5lAORFb4AJIihCRbDxQAFChAXw9HSqb60iREZ1omqrIPdJCTe0SWI09GBACH5BAkIAAAALAAAAAAQABAAAAdrgACCgwc0NTeDiYozCQkvOTo9GTmDKy8aFy+NOBA7CTswgywJDTIuEjYFIY0JNYMtKTEFiRU8Pjwygy4ws4owPyCKwsMAJSTEgiQlgsbIAMrO0dKDGMTViREZ14kYGRGK38nHguHEJcvTyIEAIfkECQgAAAAsAAAAABAAEAAAB2iAAIKDAggPg4iJAAMJCRUAJRIqiRGCBI0WQEEJJkWDERkYAAUKEBc4Po1GiKKJHkJDNEeKig4URLS0ICImJZAkuQAhjSi/wQyNKcGDCyMnk8u5rYrTgqDVghgZlYjcACTA1sslvtHRgQAh+QQJCAAAACwAAAAAEAAQAAAHZ4AAgoOEhYaCJSWHgxGDJCQARAtOUoQRGRiFD0kJUYWZhUhKT1OLhR8wBaaFBzQ1NwAlkIszCQkvsbOHL7Y4q4IuEjaqq0ZQD5+GEEsJTDCMmIUhtgk1lo6QFUwJVDKLiYJNUd6/hoEAIfkECQgAAAAsAAAAABAAEAAAB2iAAIKDhIWGgiUlh4MRgyQkjIURGRiGGBmNhJWHm4uen4ICCA+IkIsDCQkVACWmhwSpFqAABQoQF6ALTkWFnYMrVlhWvIKTlSAiJiVVPqlGhJkhqShHV1lCW4cMqSkAR1ofiwsjJyqGgQAh+QQJCAAAACwAAAAAEAAQAAAHZ4AAgoOEhYaCJSWHgxGDJCSMhREZGIYYGY2ElYebi56fhyWQniSKAKKfpaCLFlAPhl0gXYNGEwkhGYREUywag1wJwSkHNDU3D0kJYIMZQwk8MjPBLx9eXwuETVEyAC/BOKsuEjYFhoEAIfkECQgAAAAsAAAAABAAEAAAB2eAAIKDhIWGgiUlh4MRgyQkjIURGRiGGBmNhJWHm4ueICImip6CIQkJKJ4kigynKaqKCyMnKqSEK05StgAGQRxPYZaENqccFgIID4KXmQBhXFkzDgOnFYLNgltaSAAEpxa7BQoQF4aBACH5BAkIAAAALAAAAAAQABAAAAdogACCg4SFggJiPUqCJSWGgkZjCUwZACQkgxGEXAmdT4UYGZqCGWQ+IjKGGIUwPzGPhAc0NTewhDOdL7Ykji+dOLuOLhI2BbaFETICx4MlQitdqoUsCQ2vhKGjglNfU0SWmILaj43M5oEAOwAAAAAAAAAAAA==) no-repeat center left; }
|
|
15
|
+
#full_list { padding: 0; list-style: none; margin-left: 0; margin-top: 80px; font-size: 1.1em; }
|
|
16
|
+
#full_list ul { padding: 0; }
|
|
17
|
+
#full_list li { padding: 0; margin: 0; list-style: none; }
|
|
18
|
+
#full_list li .item { padding: 5px 5px 5px 12px; }
|
|
19
|
+
#noresults { padding: 7px 12px; background: #fff; }
|
|
20
|
+
#content.insearch #noresults { margin-left: 7px; }
|
|
21
|
+
li.collapsed ul { display: none; }
|
|
22
|
+
li a.toggle { cursor: default; position: relative; left: -5px; top: 4px; text-indent: -999px; width: 10px; height: 9px; margin-left: -10px; display: block; float: left; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK8AAACvABQqw0mAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTM5jWRgMAAAAVdEVYdENyZWF0aW9uIFRpbWUAMy8xNC8wOeNZPpQAAAE2SURBVDiNrZTBccIwEEXfelIAHUA6CZ24BGaWO+FuzZAK4k6gg5QAdGAq+Bxs2Yqx7BzyL7Llp/VfzZeQhCTc/ezuGzKKnKSzpCxXJM8fwNXda3df5RZETlIt6YUzSQDs93sl8w3wBZxCCE10GM1OcWbWjB2mWgEH4Mfdyxm3PSepBHibgQE2wLe7r4HjEidpnXMYdQPKEMJcsZ4zs2POYQOcaPfwMVOo58zsAdMt18BuoVDPxUJRacELbXv3hUIX2vYmOUvi8C8ydz/ThjXrqKqqLbDIAdsCKBd+Wo7GWa7o9qzOQHVVVXeAbs+yHHCH4aTsaCOQqunmUy1yBUAXkdMIfMlgF5EXLo2OpV/c/Up7jG4hhHcYLgWzAZXUc2b2ixsfvc/RmNNfOXD3Q/oeL9axJE1yT9IOoUu6MGUkAAAAAElFTkSuQmCC) no-repeat bottom left; }
|
|
23
|
+
li.collapsed a.toggle { opacity: 0.5; cursor: default; background-position: top left; }
|
|
24
|
+
li { color: #888; cursor: pointer; }
|
|
25
|
+
li.deprecated { text-decoration: line-through; font-style: italic; }
|
|
26
|
+
li.odd { background: #f0f0f0; }
|
|
27
|
+
li.even { background: #fafafa; }
|
|
28
|
+
.item:hover { background: #ddd; }
|
|
29
|
+
li small:before { content: "("; }
|
|
30
|
+
li small:after { content: ")"; }
|
|
31
|
+
li small.search_info { display: none; }
|
|
32
|
+
a, a:visited { text-decoration: none; color: #05a; }
|
|
33
|
+
li.clicked > .item { background: #05a; color: #ccc; }
|
|
34
|
+
li.clicked > .item a, li.clicked > .item a:visited { color: #eee; }
|
|
35
|
+
li.clicked > .item a.toggle { opacity: 0.5; background-position: bottom right; }
|
|
36
|
+
li.collapsed.clicked a.toggle { background-position: top right; }
|
|
37
|
+
#search input { border: 1px solid #bbb; border-radius: 3px; }
|
|
38
|
+
#full_list_nav { margin-left: 10px; font-size: 0.9em; display: block; color: #aaa; }
|
|
39
|
+
#full_list_nav a, #nav a:visited { color: #358; }
|
|
40
|
+
#full_list_nav a:hover { background: transparent; color: #5af; }
|
|
41
|
+
#full_list_nav span:after { content: ' | '; }
|
|
42
|
+
#full_list_nav span:last-child:after { content: ''; }
|
|
43
|
+
|
|
44
|
+
#content h1 { margin-top: 0; }
|
|
45
|
+
li { white-space: nowrap; cursor: normal; }
|
|
46
|
+
li small { display: block; font-size: 0.8em; }
|
|
47
|
+
li small:before { content: ""; }
|
|
48
|
+
li small:after { content: ""; }
|
|
49
|
+
li small.search_info { display: none; }
|
|
50
|
+
#search { width: 170px; position: static; margin: 3px; margin-left: 10px; font-size: 0.9em; color: #888; padding-left: 0; padding-right: 24px; }
|
|
51
|
+
#content.insearch #search { background-position: center right; }
|
|
52
|
+
#search input { width: 110px; }
|
|
53
|
+
|
|
54
|
+
#full_list.insearch ul { display: block; }
|
|
55
|
+
#full_list.insearch .item { display: none; }
|
|
56
|
+
#full_list.insearch .found { display: block; padding-left: 11px !important; }
|
|
57
|
+
#full_list.insearch li a.toggle { display: none; }
|
|
58
|
+
#full_list.insearch li small.search_info { display: block; }
|