RIOT.JS - Tagi

RIOT działa poprzez tworzenie niestandardowych, wielokrotnego użytku tagów HTML. Te znaczniki są podobne do składników sieci Web i można ich używać wielokrotnie na różnych stronach i w aplikacjach internetowych. Po dołączeniu struktury RIOT do strony HTML zaimportowany plik js tworzy zmienną zamieszek wskazującą na obiekt zamieszek. Ten obiekt zawiera funkcje wymagane do interakcji z RIOT.js, takie jak tworzenie i montowanie tagów.

Możemy tworzyć i używać tagów na dwa sposoby.

Inline HTML- Wywołując funkcję riot.tag (). Ta funkcja pobiera nazwę i definicję znacznika, aby utworzyć znacznik. Definicja tagu może zawierać HTML, JavaScript, CSS itp.
Seperate Tag file- Przechowując definicję znacznika w pliku znaczników. Ten plik znaczników zawiera definicję znacznika do tworzenia znacznika. Ten plik należy zaimportować w miejsce wywołania riot.tag ().

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

Poniżej znajduje się przykład tagu wbudowanego.

Przykład

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

To da następujący wynik -

Poniżej znajduje się przykład zewnętrznego znacznika pliku.

Przykład

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>

To da następujący wynik -