RIOT.JS - Prima applicazione

RIOT funziona costruendo tag html personalizzati e riutilizzabili. Questi tag sono simili ai componenti Web e sono riutilizzabili su pagine e app Web.

Passaggi per utilizzare RIOT

  • Importa riot.js nella pagina html.

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

  • Avvia una sezione di script e definisci il contenuto del tag come html. Può anche essere incluso lo script che vedremo più avanti nel tutorial.

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

  • Definisci un tag utilizzando il metodo riot.tag (). Passa il nome del tag, messageTag e variabile contenente il contenuto del tag.

riot.tag("messageTag", tagHtml);

  • Montare il tag utilizzando il metodo riot.mount (). Passa il nome del tag, messageTag. Il processo di montaggio monta il messageTag in tutte le sue occorrenze nella pagina html. Il tag MessageTag deve essere definito utilizzando riot.js prima del montaggio.

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

Di seguito è riportato l'esempio completo.

Esempio

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

Questo produrrà il seguente risultato: