RIOT.JS - Tags

RIOT funciona criando tags html reutilizáveis ​​e personalizadas. Essas tags são semelhantes aos componentes da Web e são reutilizáveis ​​em páginas e aplicativos da Web. Quando você inclui a estrutura RIOT em sua página HTML, o js importado cria uma variável riot apontando para um objeto riot. Este objeto contém as funções que são necessárias para interagir com o RIOT.js, como criar e montar tags.

Podemos criar e usar tags de duas maneiras.

  • Inline HTML- Chamando a função riot.tag (). Esta função usa o nome e a definição da tag para criar uma tag. A definição da tag pode conter HTML, JavaScript e CSS etc.

  • Seperate Tag file- Armazenando a definição da tag no arquivo de tag. Este arquivo de tag contém a definição de tag para criar uma tag. Este arquivo precisa ser importado no lugar da chamada riot.tag ().

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

A seguir está o exemplo de tag embutida.

Exemplo

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/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>

Isso produzirá o seguinte resultado -

A seguir está o exemplo de tag de arquivo externo.

Exemplo

messageTag.tag

<messageTag>
   <h1>Hello World!</h1>
</messageTag>

index.htm

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <messageTag></messageTag>
      <script src = "messageTag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("messageTag");
      </script>
   </body>
</html>

Isso produzirá o seguinte resultado -