RIOT.JS - Erste Anwendung

RIOT erstellt benutzerdefinierte, wiederverwendbare HTML-Tags. Diese Tags ähneln Webkomponenten und können über Seiten und Webanwendungen hinweg wiederverwendet werden.

Schritte zur Verwendung von RIOT

Importieren Sie riot.js in die HTML-Seite.

<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
</head>

Starten Sie einen Skriptabschnitt und definieren Sie den Tag-Inhalt als HTML. Es kann auch ein Skript enthalten sein, das wir später im Tutorial sehen werden.

var tagHtml = "<h1>Hello World!</h1>";

Definieren Sie ein Tag mit der Methode riot.tag (). Übergeben Sie ihm den Namen des Tags, des messageTag und der Variablen, die den Tag-Inhalt enthalten.

riot.tag("messageTag", tagHtml);

Hängen Sie das Tag mit der Methode riot.mount () ein. Übergeben Sie ihm den Namen des Tags messageTag. Beim Mounten wird der messageTag in allen Vorkommen auf der HTML-Seite bereitgestellt. Das MessageTag-Tag sollte vor dem Mounten mit riot.js definiert werden.

riot.mount("messageTag");
</script>

Es folgt das vollständige Beispiel.

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: