Todo Example

Riot custom components are the building blocks for user interfaces. They make the “view” part of the application. Let’s start with an extended <todo> example highlighting various features of Riot:

  1. <todo>
  2.   <h3>{ props.title }</h3>
  4.   <ul>
  5.     <li each={ item in state.items }>
  6.       <label class={ item.done ? 'completed' : null }>
  7.         <input
  8.           type="checkbox"
  9.           checked={ item.done }
  10.           onclick={ () => toggle(item) } />
  11.         { item.title }
  12.       </label>
  13.     </li>
  14.   </ul>
  16.   <form onsubmit={ add }>
  17.     <input onkeyup={ edit } value={ state.text } />
  18.     <button disabled={ !state.text }>
  19.       Add #{ state.items.length + 1 }
  20.     </button>
  21.   </form>
  23.   <script>
  24.     export default {
  25.       onBeforeMount(props, state) {
  26.         // initial state
  27.         this.state = {
  28.           items: props.items,
  29.           text: ''
  30.         }
  31.       },
  32.       edit(e) {
  33.         // update only the text state
  34.         this.update({
  35.           text: e.target.value
  36.         })
  37.       },
  38.       add(e) {
  39.         e.preventDefault()
  41.         if (this.state.text) {
  42.           this.update({
  43.             items: [
  44.               ...this.state.items,
  45.               // add a new item
  46.               {title: this.state.text}
  47.             ],
  48.             text: ''
  49.           })
  50.         }
  51.       },
  52.       toggle(item) {
  53.         item.done = !item.done
  54.         // trigger a component update
  55.         this.update()
  56.       }
  57.     }
  58.   </script>
  59. </todo>

Custom components are compiled to javascript.

See the live demo, browse the sources, or download the zip.