145 lines
3.1 KiB
HTML
145 lines
3.1 KiB
HTML
<h3 class="-intro" id="about">About</h3>
|
|
|
|
<p>Riot is a UI library for JavaScript.</p>
|
|
|
|
<ul>
|
|
<li><a href="https://riot.js.org/">https://riot.js.org/</a></li>
|
|
</ul>
|
|
|
|
<h3 id="tags">Tags</h3>
|
|
|
|
<pre><code class="language-js">/* tag-name.tag */
|
|
<tag-name>
|
|
<div>
|
|
hello {name}
|
|
</div>
|
|
|
|
this.name = opts.name
|
|
</tag-name>
|
|
</code></pre>
|
|
|
|
<pre><code class="language-html"><!-- in html -->
|
|
<tag-name>
|
|
<script>riot.mount('*')</script>
|
|
<script>riot.mount('tag-name')</script>
|
|
<script>riot.mount('tag-name', { title: 'my app', ... })</script>
|
|
</code></pre>
|
|
|
|
<h3 id="expressions">Expressions</h3>
|
|
|
|
<pre><code>{value}
|
|
{value || 'its a js expression'}
|
|
|
|
<input checked={null}> /* null values ignore the tag */
|
|
<p class={ selected: true }>
|
|
</code></pre>
|
|
|
|
<h3 id="loops">Loops</h3>
|
|
|
|
<pre><code><li each={movies}>{title}</li>
|
|
</code></pre>
|
|
|
|
<h3 id="conditional">Conditional</h3>
|
|
<pre><code><div if={error}>
|
|
<div show={error}> /* show using display: '' */
|
|
<div hide={error}> /* hide using display: none */
|
|
</code></pre>
|
|
|
|
<h3 id="events">Events</h3>
|
|
|
|
<pre><code class="language-js"><button onclick={go}>
|
|
|
|
this.go = function (e) { ... }
|
|
</code></pre>
|
|
|
|
<h2 id="api">API</h2>
|
|
|
|
<pre><code class="language-js">this.update()
|
|
this.update({ data: 'hi' }
|
|
|
|
this.unmount()
|
|
this.unmount(true) // keep parent tag
|
|
|
|
riot.update() // update all
|
|
</code></pre>
|
|
|
|
<h2 id="nesting">Nesting</h2>
|
|
|
|
<h3 id="nesting-1">Nesting</h3>
|
|
|
|
<pre><code><my-tag>
|
|
<child></child>
|
|
var child = this.tags.child
|
|
</my-tag>
|
|
</code></pre>
|
|
|
|
<h3 id="names">Names</h3>
|
|
|
|
<pre><code><my-tag>
|
|
<child name='xyz'></child>
|
|
var child = this.tags.xyz
|
|
</my-tag>
|
|
</code></pre>
|
|
|
|
<h2 id="nested-html">Nested HTML</h2>
|
|
|
|
<h3 id="yield">Yield</h3>
|
|
|
|
<pre><code class="language-js"><yield/>
|
|
</code></pre>
|
|
|
|
<h3 id="yield-tofrom">Yield to/from</h3>
|
|
|
|
<pre><code class="language-js"><post>
|
|
<yield to='title'>Hello</yield>
|
|
<yield to='body'>Hey there world</yield>
|
|
</post>
|
|
</code></pre>
|
|
|
|
<pre><code class="language-js"><post>
|
|
<yield from='title'/>
|
|
<yield from='body'/>
|
|
</post>
|
|
</code></pre>
|
|
|
|
<h2 id="router">Router</h2>
|
|
|
|
<pre><code class="language-js">riot.route('customers/*/edit', (id) => {
|
|
})
|
|
riot.route('customers/234/edit')
|
|
riot.route.start()
|
|
riot.route.start(true) // exec the current url
|
|
</code></pre>
|
|
|
|
<h2 id="lifecycle">Lifecycle</h2>
|
|
|
|
<pre><code class="language-js">this.on('before-mount', function() {
|
|
// before the tag is mounted
|
|
})
|
|
|
|
this.on('mount', function() {
|
|
// right after the tag is mounted on the page
|
|
})
|
|
|
|
this.on('update', function() {
|
|
// allows recalculation of context data before the update
|
|
})
|
|
|
|
this.on('updated', function() {
|
|
// right after the tag template is updated
|
|
})
|
|
|
|
this.on('before-unmount', function() {
|
|
// before the tag is removed
|
|
})
|
|
|
|
this.on('unmount', function() {
|
|
// when the tag is removed from the page
|
|
})
|
|
|
|
// curious about all events ?
|
|
this.on('all', function(eventName) {
|
|
console.info(eventName)
|
|
})
|
|
</code></pre>
|