DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
LΓ’m
LΓ’m

Posted on

Riot.Js Cheat Sheet

Lifecycle

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)
})
Enter fullscreen mode Exit fullscreen mode

Router

riot.route('customers/*/edit', (id) => {
})
riot.route('customers/234/edit')
riot.route.start()
riot.route.start(true) // exec the current url
Enter fullscreen mode Exit fullscreen mode

[Nested HTML] Yield to/from

<post>
  <yield to='title'>Hello</yield>
  <yield to='body'>Hey there world</yield>
</post>
Enter fullscreen mode Exit fullscreen mode
<post>
  <yield from='title'/>
  <yield from='body'/>
</post>
Enter fullscreen mode Exit fullscreen mode

Nested HTML

<yield/>
Enter fullscreen mode Exit fullscreen mode

[Nesting] Names

<my-tag>
  <child name='xyz'></child>
  var child = this.tags.xyz
</my-tag>
Enter fullscreen mode Exit fullscreen mode

Nesting

<my-tag>
  <child></child>
  var child = this.tags.child
</my-tag>
Enter fullscreen mode Exit fullscreen mode

API

this.update()
this.update({ data: 'hi' }

this.unmount()
this.unmount(true) // keep parent tag

riot.update() // update all
Enter fullscreen mode Exit fullscreen mode

[Expressions] Events

<button onclick={go}>

this.go = function (e) { ... }
Enter fullscreen mode Exit fullscreen mode

[Expressions] Conditional

<div if={error}>
<div show={error}> /* show using display: '' */
<div hide={error}> /* hide using display: none */
Enter fullscreen mode Exit fullscreen mode

[Expressions] Loops

<li each={movies}>{title}</li>
Enter fullscreen mode Exit fullscreen mode

Reference

Top comments (0)

🌚 Life is too short to browse without dark mode