RIOT.JS - Etiquetas

RIOT funciona creando etiquetas html personalizadas y reutilizables. Estas etiquetas son similares a los componentes web y se pueden reutilizar en todas las páginas y aplicaciones web. Cuando incluye el marco RIOT en su página HTML, el js importado crea una variable riot que apunta a un objeto riot. Este objeto contiene las funciones necesarias para interactuar con RIOT.js, como crear y montar etiquetas.

Podemos crear y utilizar etiquetas de dos formas.

  • Inline HTML- Llamando a la función riot.tag (). Esta función toma el nombre de la etiqueta y la definición de la etiqueta para crear una etiqueta. La definición de la etiqueta puede contener HTML, JavaScript y CSS, etc.

  • Seperate Tag file- Almacenando la definición de la etiqueta en un archivo de etiqueta. Este archivo de etiqueta contiene una definición de etiqueta para crear una etiqueta. Este archivo debe importarse en lugar de la llamada riot.tag ().

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

A continuación se muestra el ejemplo de etiqueta en línea.

Ejemplo

<!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>

Esto producirá el siguiente resultado:

A continuación se muestra el ejemplo de etiqueta de archivo externo.

Ejemplo

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>

Esto producirá el siguiente resultado: