riot.md

   1 ---
   2 title: Riot.js
   3 category: JavaScript libraries
   4 layout: default-ad
   5 ---
   6
   7 ## Tags
   8
   9 ```js
  10 /* tag-name.tag */
  11 <tag-name>
  12   <div>
  13     hello {name}
  14   </div>
  15
  16   this.name = opts.name
  17 </tag-name>
  18 ```
  19
  20 ```html
  21 <!-- in html -->
  22 <tag-name>
  23 <script>riot.mount('*')</script>
  24 <script>riot.mount('tag-name')</script>
  25 <script>riot.mount('tag-name', { title: 'my app', ... })</script>
  26 ```
  27
  28 ## Expressions
  29
  30 ```
  31 {value}
  32 {value || 'its a js expression'}
  33
  34 <input checked={null}>   /* null values ignore the tag */
  35 <p class={ selected: true }>
  36 ```
  37
  38 ### Loops
  39
  40 ```
  41 <li each={movies}>{title}</li>
  42 ```
  43
  44 ### Conditional
  45 ```
  46 <div if={error}>
  47 <div show={error}> /* show using display: '' */
  48 <div hide={error}> /* hide using display: none */
  49 ```
  50
  51 ### Events
  52
  53 ```js
  54 <button onclick={go}>
  55
  56 this.go = function (e) { ... }
  57 ```
  58
  59 ## API
  60
  61 ```js
  62 this.update()
  63 this.update({ data: 'hi' }
  64
  65 this.unmount()
  66 this.unmount(true) // keep parent tag
  67
  68 riot.update() // update all
  69 ```
  70
  71 ## Nesting
  72
  73 ```
  74 <my-tag>
  75   <child></child>
  76   var child = this.tags.child
  77 </my-tag>
  78 ```
  79
  80 ### Names
  81
  82 ```
  83 <my-tag>
  84   <child name='xyz'></child>
  85   var child = this.tags.xyz
  86 </my-tag>
  87 ```
  88
  89 ## Nested HTML
  90
  91 ```js
  92 <yield/>
  93 ```
  94
  95 ### Yield to/from
  96
  97 ```js
  98 <post>
  99   <yield to='title'>Hello</yield>
 100   <yield to='body'>Hey there world</yield>
 101 </post>
 102 ```
 103
 104 ```js
 105 <post>
 106   <yield from='title'/>
 107   <yield from='body'/>
 108 </post>
 109 ```
 110
 111 ## Router
 112
 113 ```js
 114 riot.route('customers/*/edit', (id) => {
 115 })
 116 riot.route('customers/234/edit')
 117 riot.route.start()
 118 riot.route.start(true) // exec the current url
 119 ```
 120
 121 ## Lifecycle
 122
 123 ```js
 124 this.on('before-mount', function() {
 125 // before the tag is mounted
 126 })
 127
 128 this.on('mount', function() {
 129 // right after the tag is mounted on the page
 130 })
 131
 132 this.on('update', function() {
 133 // allows recalculation of context data before the update
 134 })
 135
 136 this.on('updated', function() {
 137 // right after the tag template is updated
 138 })
 139
 140 this.on('before-unmount', function() {
 141 // before the tag is removed
 142 })
 143
 144 this.on('unmount', function() {
 145 // when the tag is removed from the page
 146 })
 147
 148 // curious about all events ?
 149 this.on('all', function(eventName) {
 150 console.info(eventName)
 151 })
 152 ```