Tech and Media Labs
This site uses cookies to improve the user experience.




Riot.js Yield

Jakob Jenkov
Last update: 2017-04-20

The Riot.js yield mechanism enables you to pass HTML to a custom Riot.js tag. The Riot.js tag can then embed this HTML into the HTML it generates itself. The Riot.js yield mechanism thus allows users of your custom Riot.js tags to inject HTML into your tags where you see fit to include external HTML.

Simple Riot.js Yield Example

To use the Riot.js yield mechanism you must insert a <yield/> element in your tag definition. The location of the <yield> element is where the HTML passed from the user of your custom tag will be inserted. Here is a Riot.js tag definition with a <yield>

<mytag>
<h1>The Title</h1>

<yield/>

</mytag>    

Notice the <yield/> tag in the tag definition. This is where the external HTML will be inserted.

The HTML to be inserted into the <mytag> custom tag above is just embedded inside the body of the <mytag> tag where it is used. Here is an example that shows how:

>!DOCTYPE html<
>html<
>head<
	>script src="riot%2Bcompiler.js"<>/script<
>/head<
>body<

>h1<Yield Example>/h1<

>mytag<
This HTML comes from the outside.
>/mytag<

>script src="yielding.tag" type="riot/tag"<>/script<
>script<
	riot.mount("mytag");
>/script<

>/body<
>/html<

Notice the text inside the <mytag> element. This is the HTML that is passed to the <mytag> and inserted inside.

Multiple Yields

It is possible to send multiple blocks of HTML to a Riot.js custom tag. These blocks can then be inserted in different places in the HTML the tag generates.

To support multiple yield blocks the Riot.js tag definition must contain one yield element per HTML block it allows to be passed to it. Each of these yield elements gets an ID which can be referenced by the user of the tag. Here is an example Riot.js tag definition with multiple yield elements:

>mytag<
>h1<The Title>/h1<

Block one: 
>yield from="one"/<

>br<>br<
Block two:
>yield from="two"/<

>/mytag<    

Notice the two <yield> elements. They both have an from attribute with different values. It is the value of these from attributes that are the ids of the <yield> elements. These attribute values are referenced when passing HTML blocks to this tag.

In order to send multiple HTML blocks to a Riot.js tag each block must be embedded inside a <yield> element inside the body of the custom Riot.js tag, where the tag is used. Here is how that looks:

<!DOCTYPE html>
<html>
<head>
	<script src="riot%2Bcompiler.js"></script>
</head>
<body>

<h1>Yield Example</h1>

<mytag>
 <yield to="one">Show this first</yield>
 <yield to="two">Show this second</yield>
</mytag> 

<script src="yielding.tag" type="riot/tag"></script>
<script>
	riot.mount("mytag");
</script>

</body>
</html>    

Notice the two <yield> elements inside the body of the <mytag> element. Notice they both have a to attribute. The values of these two to attributes reference the values of the from attributes of the <yield> elements inside the tag definition. Thus, the <yield to="one"> element body will be inserted where the <yield from="one"> element is located inside the tag definition.

In other words, a <yield from="abc"> inserts the HTML passed in the body of a <yield to="abc"> element. You you yield "to", and insert "from".

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC