November 29, 2016 - VitoMd and the Evil Machine

Tag communication in Riot.js - part 1

Introduction

This tutorial assumes that you are familiar with Riot.js, if not check this introductory tutorial: Hello Riot.js. In Riot.js you can build components called tags, they can have html, javascript and css in the same file and can handle events, methods and variables.

code

I´m going to explain how tags can communicate. There are basically four types of tag communication:

Parent to child
Child to parent
Sibling to sibling
Any to any

Parent to child

You can pass params (options) from the parent to the child and then reference them with the opts variable. In the example, we are passing the hi option in the parent and then using {opts.hi} in the child.

<vader>
  <luke hi="Hi child"></luke>
</vader>

//luke.tag
<luke>
  <span>{opts.hi}</span>
</luke>

In general is better to builds dumb components, with little logic and just use opts to show the data.

Child to Parent

Riot.js provides access to the parent tag using the parent variable. Have in mind that using this approach could couple your components, so they will not be independent components.

<vader>
  <luke></luke>
  <script>
  	this.hi = "Hi, I am your father"
  </script>
</vader>

//luke.tag
<luke>
  <span>{this.parent.hi}</span>
</luke>

Check the working example on plunker

Another option is to use a callback function, so the components don´t get coupled. We send a function from the parent to the child using the opts variable and that function will get executed by the child in the parent context.

<vader>
  <luke handle_hi={say_hi}></luke>
  <span>{this.hi} </span>
  <script>
    this.hi = "I am your father"
    say_hi() {
      this.hi = "I am your son"
      this.update()
}
  </script>
</vader>

<luke>
 <span onclick={opts.handle_hi}>LUKE</span>
</luke>

Check the working example on plunker

In this example, we defined the say_hi function in the parent and we pass it to the child as a parameter (handle_hi). When the onclick event fires in the child it will call that function and it will get executed in the parent context.

code

Sibling to Sibling

Siblings share the parent, so we can access the parent and from there access their children using the tags variable. For instance, Leia tag access the parent.tags.luke.hi to read the hi variable in the Luke tag.

<vader>
  <leia></leia>
  <luke></luke>
</vader>

<leia>
  <span>{this.parent.tags.luke.hi}</span>
  <script>
    this.hi = 'Hi bro'
  </script>  
</leia>

<luke>
  <span>{this.parent.tags.leia.hi}</span>
  <script>
    this.hi = 'Hi sis'
  </script>   
</luke>

Warning: This approach is not recommended as the components will get couple. For this case could be better to use our next pattern.

Any to Any

Here we can use the Observable tool that Riot.js provides to trigger and listen to events. Also there are some popular implementation like RiotControl. A more detailed tutorial will come shortly about this subject in part 2 of this tutorial.

Share this post on Twitter