RIOT.JS - Tags

RIOT erstellt benutzerdefinierte, wiederverwendbare HTML-Tags. Diese Tags ähneln Webkomponenten und können über Seiten und Webanwendungen hinweg wiederverwendet werden. Wenn Sie das RIOT-Framework in Ihre HTML-Seite aufnehmen, erstellt das importierte js eine Riot-Variable, die auf ein Riot-Objekt verweist. Dieses Objekt enthält die Funktionen, die für die Interaktion mit RIOT.j erforderlich sind, z. B. das Erstellen und Mounten von Tags.

Wir können Tags auf zwei Arten erstellen und verwenden.

Inline HTML- Durch Aufrufen der Funktion riot.tag (). Diese Funktion verwendet den Tag-Namen und die Tag-Definition, um ein Tag zu erstellen. Die Tag-Definition kann HTML, JavaScript und CSS usw. enthalten.
Seperate Tag file- Durch Speichern der Tag-Definition in der Tag-Datei. Diese Tag-Datei enthält eine Tag-Definition zum Erstellen eines Tags. Diese Datei muss anstelle des Aufrufs von riot.tag () importiert werden.

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

Es folgt das Beispiel eines Inline-Tags.

Beispiel

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

Dies führt zu folgendem Ergebnis:

Es folgt das Beispiel eines externen Datei-Tags.

Beispiel

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>

Dies führt zu folgendem Ergebnis: