RIOT.JS - Première application

RIOT fonctionne en créant des balises HTML personnalisées et réutilisables. Ces balises sont similaires aux composants Web et sont réutilisables sur les pages et les applications Web.

Étapes à suivre pour utiliser RIOT

  • Importez riot.js dans la page html.

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

  • Démarrez une section de script et définissez le contenu de la balise au format HTML. Le script peut également être inclus, ce que nous verrons plus tard dans le didacticiel.

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

  • Définissez une balise à l'aide de la méthode riot.tag (). Transmettez-lui le nom de la balise, messageTag et variable contenant le contenu de la balise.

riot.tag("messageTag", tagHtml);

  • Montez la balise en utilisant la méthode riot.mount (). Transmettez-lui le nom de la balise, messageTag. Le processus de montage monte le messageTag dans toutes ses occurrences dans la page html. La balise MessageTag doit être définie à l'aide de riot.js avant le montage.

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

Voici l'exemple complet.

Exemple

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

Cela produira le résultat suivant -