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
<mytag> <h1>The Title</h1> <yield/> </mytag>
<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
<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.
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
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
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
element. Notice they both have a
to attribute. The values of these two
attributes reference the values of the
from attributes of the
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".