Riot.js cheatsheet
This article was originally published at https://gist.github.com/joepie91/ed3a267de70210b46fb06dd57077827a .
Component styling
This section only applies to Riot.js 2.x. Since 3.x, all styles are scoped by default and you can simply add a style tag to your component.
You can use a
Use the :scope pseudo-selector, eg.
You can change where global styles are 'injected' by having somewhere in your . This is useful for eg. controlling what styles are overridden.
Mounting
"Mounting" is the act of attaching a custom tag's template and behaviour to a specific element in the DOM. The most common case is to mount all instances of a specific top-level tag, but there are more options:
Mount all custom tags on the page: riot.mount("*")
Mount all instances of a specific tag name: riot.mount("app")
Mount a tag with a specific ID: riot.mount("#specific_element")
Mount using a more complex selector: riot.mount("foo, bar")
Note that "child tags" (that is, custom tags that are specified within other custom tags) are automatically mounted as-needed. You do not need to riot.mount them separately.
The simplest example:
Tag logic
Conditionally add to DOM: ...
Conditionally display: ... (but the tag always exists in the DOM)
Conditionally hide: ... (but the tag always exists in the DOM)
For-each loop: ... (you can access 'item' from within the tag) ... (one instance of your-tag for each item in items )
For-each loop of an object: ... (you can access 'key' and 'value' from within the tag) ... (this is slow! )
All of the above also work on regular (ie. non-Riot) HTML tags.
If you need to add/hide/display/loop a group of tags, rather than a single one, you can wrap them in a pseudo-tag. This works with all of the above constructs. For example: