Rendering template strings in RiotJS

Question

I have a template string "<a onclick={ parent.foo }>Link</a>". I want pass it to other tag and than render it correctly. I added short example of my code. It doesn't work, just try to show what I need.

<child-tag>
    <div>{ opts.data }</div>
</child-tag>

<parent-tag>
    <child-tag data={ html }></child-tag>
    
    <script>
    this.html = "<a onclick={ parent.foo }>Link</a>";

    foo() {
        console.log("Hello");
    }
    </script>
</parent-tag>

Answer 1

Riot will escape the html where you have { opts.data }. You can use the <raw> tag as described in the riot documentation. But it may be best to rewrite the code as such.

https://jsfiddle.net/nnyc688e/1/

<child-tag>
  <yield/>
</child-tag>

<parent-tag>
    <child-tag> <a onclick={ parent.foo }>Link</a> </child-tag>

    foo() {
      console.log("Hello");
    }
</parent-tag>

That's easier to understand too.