308 lines
8.3 KiB
HTML
308 lines
8.3 KiB
HTML
<!doctype html>
|
|
<html lang='en' class='no-js '>
|
|
<head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<meta charset='utf-8'>
|
|
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
|
<link href='./assets/favicon.png' rel='shortcut icon'>
|
|
<meta content='/riot.html' name='app:pageurl'>
|
|
|
|
|
|
<title>Riot.js cheatsheet</title>
|
|
<meta content='Riot.js cheatsheet' property='og:title'>
|
|
<meta content='Riot.js cheatsheet' property='twitter:title'>
|
|
<meta content='article' property='og:type'>
|
|
|
|
|
|
|
|
<meta content='https://assets.devhints.io/previews/riot.jpg?t=20220315221941' property='og:image'>
|
|
<meta content='https://assets.devhints.io/previews/riot.jpg?t=20220315221941' property='twitter:image'>
|
|
<meta content='900' property='og:image:width'>
|
|
<meta content='471' property='og:image:height'>
|
|
|
|
|
|
|
|
<meta content="The one-page guide to Riot.js: usage, examples, links, snippets, and more." name="description">
|
|
<meta content="The one-page guide to Riot.js: usage, examples, links, snippets, and more." property="og:description">
|
|
<meta content="The one-page guide to Riot.js: usage, examples, links, snippets, and more." property="twitter:description">
|
|
|
|
|
|
<link rel="canonical" href="https://devhints.io/riot">
|
|
<meta name="og:url" content="https://devhints.io/riot">
|
|
|
|
|
|
|
|
|
|
|
|
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<meta content='JavaScript libraries' property='article:section'>
|
|
|
|
|
|
|
|
|
|
|
|
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-106902774-1'></script>
|
|
<script>
|
|
|
|
window.dataLayer=window.dataLayer||[];
|
|
function gtag(){dataLayer.push(arguments)};
|
|
gtag('js',new Date());
|
|
gtag('config','UA-106902774-1');
|
|
</script>
|
|
|
|
|
|
|
|
<meta property='page:depth' content='1'>
|
|
|
|
|
|
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
|
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
|
|
|
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&window.Map)return;var js,sc=d.getElementsByTagName(s)[0];js=d.createElement(s);js.src='https://cdn.polyfill.io/v2/polyfill.min.js';sc.parentNode.insertBefore(js, sc);}(document,'script'))</script>
|
|
|
|
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
|
|
|
<style>html{opacity:0}</style>
|
|
<link rel="stylesheet" href="./assets/2015/style.css?t=20220315221941">
|
|
<link href="./assets/style.css?t=20220315221941" rel="stylesheet" />
|
|
<link href="./assets/print.css?t=20220315221941" rel="stylesheet" media="print" />
|
|
</head>
|
|
<body>
|
|
<div class='all'>
|
|
|
|
<div class='site-header'>
|
|
<div class='container'>
|
|
This is <a href="."><em>Devhints.io cheatsheets</em></a> — a collection of cheatsheets I've written.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class='post-list -single -cheatsheet'>
|
|
<div class='post-item'>
|
|
|
|
<ul class="social-list -collapse">
|
|
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/riot.html" target="share"><span class="text"></span></a></li>
|
|
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Riot.js.%20https://devhints.io/riot.html" target="share"><span class="text"></span></a></li>
|
|
|
|
</ul>
|
|
|
|
|
|
<div class='post-headline -cheatsheet'>
|
|
<p class='prelude'><span></span></p>
|
|
<h1><span>Riot.js</span></h1>
|
|
</div>
|
|
|
|
|
|
<div class='headline-pub'>
|
|
<script async src='https://pubsrv.devhints.io/carbon.js?serve=CE7IK5QM&placement=devhintsio&cd=pubsrv.devhints.io/s' id="_carbonads_js"></script>
|
|
</div>
|
|
|
|
|
|
<div class='post-content -cheatsheet'>
|
|
<h2 id="tags">Tags</h2>
|
|
|
|
<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>
|
|
|
|
<h2 id="expressions">Expressions</h2>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
</div>
|
|
|
|
|
|
<ul class="social-list ">
|
|
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/riot.html" target="share"><span class="text"></span></a></li>
|
|
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20Riot.js.%20https://devhints.io/riot.html" target="share"><span class="text"></span></a></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="about-the-site">
|
|
<div class="container">
|
|
<p class='blurb'>
|
|
<strong><a href=".">Devhints.io cheatsheets</a></strong> is a collection of cheatsheets I've written over the years.
|
|
Suggestions and corrections? <a href='https://github.com/rstacruz/cheatsheets/issues/907'>Send them in</a>.
|
|
<i class='fleuron'></i>
|
|
I'm <a href="http://ricostacruz.com">Rico Sta. Cruz</a>.
|
|
Check out my <a href="http://ricostacruz.com/til">Today I learned blog</a> for more.
|
|
</p>
|
|
|
|
|
|
<p class='back'>
|
|
<a class='big-button -back -slim' href='.#toc'></a>
|
|
</p>
|
|
|
|
|
|
<p>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="https://cdn.rawgit.com/rstacruz/unorphan/v1.0.1/index.js"></script>
|
|
<script>hljs.initHighlightingOnLoad()</script>
|
|
<script>unorphan('h1, h2, h3, p, li, .unorphan')</script>
|
|
|
|
</body>
|
|
</html>
|
|
|