RIOT.JS - Pierwsza aplikacja

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.

Kroki korzystania z RIOT

Zaimportuj plik riot.js na stronie html.

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

Uruchom sekcję skryptu i zdefiniuj zawartość tagu jako html. Można również dołączyć skrypt, który zobaczymy w dalszej części samouczka.

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

Zdefiniuj tag za pomocą metody riot.tag (). Przekaż mu nazwę tagu, messageTag i zmienną zawierającą zawartość tagu.

riot.tag("messageTag", tagHtml);

Zamontuj tag za pomocą metody riot.mount (). Przekaż mu nazwę tagu, messageTag. Proces montowania montuje MessageTag we wszystkich jego wystąpieniach na stronie html. Tag MessageTag należy zdefiniować za pomocą riot.js przed zamontowaniem.

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

Oto kompletny przykład.

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 -