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




Riot.js Tags

Jakob Jenkov
Last update: 2017-04-17

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 riot variable 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. The riot.tag() function takes two parameters. The first parameter is the tag name. The second parameter is the tag definition which is a string containing HTML, JavaScript, CSS etc.

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 riot.tag() function. Notice that the example above contains a <mytag> HTML element. This element is where the reusable Riot.js tag will be inserted (also named mytag).

The tag definition is the string referenced by the tagHtml variable. This is passed as the second parameter to the riot.tag() function.

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 <script> tag that includes the file that contains the tag definition. The <script> tag is this part:

<script src="mytag.tag" type="riot/tag"></script>

Jakob Jenkov




Copyright  Jenkov Aps
Close TOC