How to pass variable to child tag using riot js

Question

I am not that much experienced in riot js. Hierarchy of tags which i created are like

<tag-1>
    <tag-2>
        <tag-3>
        </tag-3>
    </tag-2>
</tag-1>

Now i need to pass variable (whcih contains JSON) to "tag-3", and on every update of that variable how can i update "tag-3". Right now i am mounting "tag-3" like

riot.mount('tag-3', { comm: "Hello" });

where "comm" is variable, and after mount variable "comm" is not accessible in tag "tag-3" it show undefined. Another thing, each tag html is in a separate ".tag" and withing that tag i am calling other tag, like in "tag-1.tag" file "tag-2" is called and in "tag-2.tag" file i am calling "tag-3", and in "tag-2.tag" file i am mounting "tag-3"

How can i do that ?

score 5 · Answer 1 · answered Aug 29 '15 at 08:08

You don't need to mount tags inside other riot tags - only root tags need to be mounted. That's why your comm parameter doesn't get it into tag-3.
You can have several tag definitions in one .tag file. After tag files are compiled, it does not matter whether the riot tags inside were loaded from multiple tag files or not.
You can pass variables as tag attributes - they will be available under opts variable.

Putting all together, your single tag file can look like this:

<tag-1>
  <p>This is my TAG1</p>
  <tag-2 comm="{ commValue}"></tag-2>

  <script>
    this.commValue = { text: 'My text' }
  </script>
</tag-1>

<tag-2>
  <p>This is my TAG2 with comm: { opts.comm.text }</p>

  <script>
    this.on('update', function () {
      // you can use 'opts.comm' here
    });

  </script>
</tag-2>

score 1 · Answer 2 · answered Mar 02 '16 at 21:48

It sounds as thought the value of comm will keep changing over time. If that is true, your best bet is the riot.observable() mechanism for sending messages between existing tags.

Whichever tags that are causing the value-change will "trigger" a message of your choice -- perhaps 'value_changed'.

riot.observable().trigger('value_changed', {comm: newValueOfComm})
Your tag-3 will "listen" for the message 'value_changed' and do something based on it.

riot.observable().on('value_changed', function(data) { console.log("new value=" + data.comm); })

For a working example, check out "Mechanism 2" at: http://vinapps.com/riot-cookbook-app/#/pages/between-page

The reference page is here: http://riotjs.com/api/observable/

score 0 · Answer 3 · answered Jul 19 '22 at 10:19

In Riot version 4 and up, you simply use the attribute to pass anything you want - either a whole JS object, a primitive, or a basic string.

The passed attributes are accessible in the child component as this.props.

<parent-component>

  <inner-component data={state.thingToPass} />
</parent-component>

If you want the child/inner component to respond to changes in their attribute - it is not automatic - you should override the child's onUpdated(props,state) method and check for changes in the props and react as you wish to the changes.

Of course, you can do it in other ways, too, such as passing observables, and similar tactics, as well as passing an API object, etc. but often, the above way is the simplest for most cases.

How to pass variable to child tag using riot js

3 Answers3