Riot.js tags are reusable HTML tags which you can use in your Riot.js web apps. Once a tag is implemented you can reuse it across multiple web pages or web apps as long as they use Riot.js.
There are two ways to define an HTML tag in Riot.js. You can define a tag inline, or define it in its own file and include that file in the HTML pages that use it. Both of these options will be explained in this tutorial.
The riot Object
When you include the Riot.js framework in your HTML page, Riot.js creates a
that points to a Riot.js object. This object contains the functions you need to interact with the Riot.js.
You will see that throughout the examples in this text and other texts in this Riot.js tutorial.
Defining Tags Inline
Defining a Riot.js tag inline is done by calling the
riot.tag() function takes two parameters. The first parameter is the tag name.
Here is a full Riot.js example that defines a reusable Riot.js HTML tag inline:
<!DOCTYPE html> <html> <head> <script src="riot+compiler.js"></script> </head> <body> <mytag></mytag> <script> var tagHtml = "<h1>Inline Tag</h1>"; riot.tag("mytag", tagHtml); riot.mount("mytag"); </script> </body> </html>
The tag being define is named
mytag . That is the first parameter to the
Notice that the example above contains a
<mytag> HTML element. This element is where the
reusable Riot.js tag will be inserted (also named
The tag definition is the string referenced by the
tagHtml variable. This is passed as the second
parameter to the
The result of the above example is that the HTML
<h1>Inline Tag</h1> will be inserted
at the point where the
<mytag> HTML element is located.
Defining Tags in Separate Files
The second way to define Riot.js tags is to define them in their own tag files. Here is an example
Riot.js tag file, defining the same
<mytag> HTML element used in the first example
in this text.
<mytag> <h1>This is MyTag</h1> </mytag>
This tag definition is stored in a file named
mytag.tag. This file can now be included in
another HTML page, like this:
<!DOCTYPE html> <html> <head> <script src="riot+compiler.js"></script> </head> <body> <mytag></mytag> <script src="mytag.tag" type="riot/tag"></script> <script> riot.mount("mytag"); </script> </body> </html>
Notice that the
riot.tag() function call has been replaced with a
tag that includes the file that contains the tag definition. The
is this part:
<script src="mytag.tag" type="riot/tag"></script>