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 ?

Answer 1

1. 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.

2. 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.

3. 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>

Answer 2

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.

1. 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})

2. 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/