RIOT.JS - Tag

RIOT funziona costruendo tag html personalizzati e riutilizzabili. Questi tag sono simili ai componenti Web e sono riutilizzabili su pagine e app Web. Quando includi il framework RIOT nella tua pagina HTML, il js importato crea una variabile riot che punta a un oggetto riot. Questo oggetto contiene le funzioni necessarie per interagire con RIOT.js come la creazione e il montaggio dei tag.

Possiamo creare e utilizzare i tag in due modi.

  • Inline HTML- Chiamando la funzione riot.tag (). Questa funzione prende il nome del tag e la definizione del tag per creare un tag. La definizione del tag può contenere HTML, JavaScript e CSS ecc.

  • Seperate Tag file- Memorizzando la definizione del tag nel file di tag. Questo file di tag contiene la definizione di tag per creare un tag. Questo file deve essere importato al posto della chiamata riot.tag ().

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

Di seguito è riportato l'esempio di tag inline.

Esempio

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

Questo produrrà il seguente risultato:

Di seguito è riportato l'esempio di tag di file esterno.

Esempio

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>

Questo produrrà il seguente risultato: