RIOT.JS - Balises

RIOT fonctionne en créant des balises HTML personnalisées et réutilisables. Ces balises sont similaires aux composants Web et sont réutilisables sur les pages et les applications Web. Lorsque vous incluez le framework RIOT dans votre page HTML, le js importé crée une variable riot pointant vers un objet riot. Cet objet contient les fonctions nécessaires pour interagir avec RIOT.js, comme la création et le montage de balises.

Nous pouvons créer et utiliser des balises de deux manières.

  • Inline HTML- En appelant la fonction riot.tag (). Cette fonction prend le nom de la balise et la définition de la balise pour créer une balise. La définition de balise peut contenir du HTML, du JavaScript et du CSS, etc.

  • Seperate Tag file- En stockant la définition de balise dans un fichier de balises. Ce fichier de balise contient une définition de balise pour créer une balise. Ce fichier doit être importé à la place de l'appel riot.tag ().

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

Voici l'exemple de balise en ligne.

Exemple

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

Cela produira le résultat suivant -

Voici l'exemple de balise de fichier externe.

Exemple

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>

Cela produira le résultat suivant -