RIOT.JS - Tags-alljchome-开发者的教程家园

RIOT.JS Tutorial

Selected Reading

RIOT.JS - Tags

RIOT works by building custom, reusable html tags. These tags are similar to Web components and are reusable across pages and web apps. When you include the RIOT framework in your HTML page, the imported js creates a riot variable pointing to a riot object. This object contains the functions which is required to interact with the RIOT.js pke creating and mounting tags.

We can create and use tags in two ways.

Inpne HTML − By calpng riot.tag() function. This function takes the tag name and tag definition to create a tag. Tag definition can contain HTML, JavaScript and CSS etc.

Seperate Tag file − By storing the tag definition in tag file. This tag file contains tag definition to create a tag . This file needs to be imported inplace of riot.tag() call.

<script src = "/riotjs/src/messageTag.tag" type = "riot/tag"></script<

Following is the example of inpne tag.

Example

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/pbs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script>
         var tagHtml = "<h1>Hello World!</h1>";
         riot.tag("messageTag", tagHtml);
         riot.mount("messageTag");
      </script>
   </body>
</html>

This will produce following result −