Conditionals

Conditionals let you mount / unmount dom and components based on a condition. For example:

  1. <div if={ isPremium }>
  2.   <p>This is for premium users only</p>
  3. </div>

Again, the expression can be just a simple property or a full javascript expression. The if directive is a special attribute:

  • true or (truthy): mount a nested component or add an element to the template
  • false or (falsy): unmount an element or a component

Fragments conditional

>=4.2.0

The if directives can be used also without the use of a wrapper tag. Thanks to the <template> tag you can render only the content of an if condition:

  1. <template if={isReady}>
  2.   <header></header>
  3.   <main></main>
  4.   <footer></footer>
  5. </template>

The <template> tag will be just used to wrap a html fragment that depends on a Riot.js directive, this feature is available also for loops