This is Devhints.io cheatsheets — a collection of cheatsheets I've written.

# Riot.js

## Tags

    /* tag-name.tag */
    <tag-name>
      <div>
        hello {name}
      </div>

      this.name = opts.name
    </tag-name>

    <!-- in html -->
    <tag-name>
    <script>riot.mount('*')</script>
    <script>riot.mount('tag-name')</script>
    <script>riot.mount('tag-name', { title: 'my app', ... })</script>

## Expressions

    {value}
    {value || 'its a js expression'}

    <input checked={null}>   /* null values ignore the tag */
    <p class={ selected: true }>

### Loops

    <li each={movies}>{title}</li>

### Conditional

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

### Events

    <button onclick={go}>

    this.go = function (e) { ... }

## API

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

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

    riot.update() // update all

## Nesting

    <my-tag>
      <child></child>
      var child = this.tags.child
    </my-tag>

### Names

    <my-tag>
      <child name='xyz'></child>
      var child = this.tags.xyz
    </my-tag>

## Nested HTML

    <yield/>

### Yield to/from

    <post>
      <yield to='title'>Hello</yield>
      <yield to='body'>Hey there world</yield>
    </post>

    <post>
      <yield from='title'/>
      <yield from='body'/>
    </post>

## Router

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

## 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)
    })

Devhints.io cheatsheets is a collection of cheatsheets I've written over the years. Suggestions and corrections? Send them in. I'm Rico Sta. Cruz. Check out my Today I learned blog for more.