Expressions

HTML can be mixed with expressions that are enclosed in curly braces:

  1. { /* my_expression goes here */ }

Expressions can set attributes or nested text nodes:

  1. <h3 id={ /* attribute_expression */ }>
  2.   { /* nested_expression */ }
  3. </h3>

Expressions are 100% javascript. A few examples:

  1. { title || 'Untitled' }
  2. { results ? 'ready' : 'loading' }
  3. { new Date() }
  4. { message.length > 140 && 'Message is too long' }
  5. { Math.round(rating) }

The goal is to keep the expressions small so your HTML stays as clean as possible. If your expression grows in complexity consider moving some of logic to the “onBeforeUpdate” callback. For example:

  1. <my-component>
  3.   <!-- the `val` is calculated below .. -->
  4.   <p>{ val }</p>
  6.   <script>
  7.     export default {
  8.       onBeforeUpdate() {
  9.         // ..on every update
  10.         this.val = some / complex * expression ^ here
  11.       }
  12.     }
  13.   </script>
  14. </my-component>

Boolean attributes

Boolean attributes (checked, selected, etc.) are ignored when the expression value is falsy:

<input checked={ null }> becomes <input>.

W3C states that a boolean property is true if the attribute is present at all — even if the value is empty of false.

The following expression does not work:

  1. <input type="checkbox" { true ? 'checked' : ''}>

since only attribute and nested text expressions are valid. Riot detects automatically all the valid html boolean attributes.

Object spread attribute

You can also use an object spread expression to define multiple attributes. For example:

  1. <my-component>
  2.   <p { ...attributes }></p>
  3.   <script>
  4.     export default {
  5.       attributes: {
  6.         id: 'my-id',
  7.         role: 'contentinfo',
  8.         class: 'main-paragraph'
  9.       }
  10.     }
  11.   </script>
  12. </my-component>

evaluates to <p id="my-id" role="contentinfo" class="main-paragraph">.

Printing brackets

You can output an expression without evaluation by escaping the opening bracket:

{ this is not evaluated } outputs { this is not evaluated }

Be sure to escape brackets in any situation where they should not be evaluated. For example, the Regex pattern below will fail to validate the intended input (any two numeric characters) and instead only accept a single numeric character followed by the number “2”:

  1. <my-component>
  2.   <input type="text" pattern="\d{2}">
  3. </my-component>

The correct implementation would be:

  1. <my-component>
  2.   <input type="text" pattern="\d\{2}">
  3. </my-component>

Etc

Expressions inside style tags are ignored.

Render unescaped HTML

Riot expressions can only render text values without HTML formatting. However you can make a custom tag to do the job. For example:

  1. <raw>
  2.   <script>
  3.     export default {
  4.       setInnerHTML() {
  5.         this.root.innerHTML = props.html
  6.       }
  7.       onMounted() {
  8.         this.setInnerHTML()
  9.       },
  10.       onUpdated() {
  11.         this.setInnerHTML()
  12.       }
  13.     }
  14.   </script>
  15. </raw>

After the tag is defined you can use it inside other tags. For example

  1. <my-component>
  2.   <p>Here is some raw content: <raw html={ content }/> </p>
  4.   <script>
  5.     export default {
  6.       onBeforeMount() {
  7.         this.content = 'Hello, <strong>world!</strong>'
  8.       }
  9.     }
  10.   </script>
  11. </my-component>

demo on jsfiddle

:warning: this could expose the user to XSS attacks so make sure you never load data from an untrusted source.