--- title: Riot.js category: JavaScript libraries --- ### About {: .-intro} Riot is a UI library for JavaScript. - ### Tags ```js /* tag-name.tag */ hello {name} this.name = opts.name ``` ```html ``` ### Expressions ``` {value} {value || 'its a js expression'} /* null values ignore the tag */ ``` ### Loops ``` {title} ``` ### Conditional ``` /* show using display: '' */ /* hide using display: none */ ``` ### Events ```js this.go = function (e) { ... } ``` ## API ```js this.update() this.update({ data: 'hi' } this.unmount() this.unmount(true) // keep parent tag riot.update() // update all ``` ## Nesting ### Nesting ``` var child = this.tags.child ``` ### Names ``` var child = this.tags.xyz ``` ## Nested HTML ### Yield ```js ``` ### Yield to/from ```js Hello Hey there world ``` ```js ``` ## Router ```js riot.route('customers/*/edit', (id) => { }) riot.route('customers/234/edit') riot.route.start() riot.route.start(true) // exec the current url ``` ## Lifecycle ```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) }) ```
``` ### Loops ```