RIOT.JS - Primera aplicación

RIOT funciona creando etiquetas html personalizadas y reutilizables. Estas etiquetas son similares a los componentes web y se pueden reutilizar en todas las páginas y aplicaciones web.

Pasos para usar RIOT

  • Importe riot.js en la página html.

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

  • Inicie una sección de secuencia de comandos y defina el contenido de la etiqueta como html. También se puede incluir un script que veremos más adelante en el tutorial.

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

  • Defina una etiqueta usando el método riot.tag (). Pase el nombre de la etiqueta, messageTag y variable que contiene el contenido de la etiqueta.

riot.tag("messageTag", tagHtml);

  • Monte la etiqueta usando el método riot.mount (). Pásale el nombre de la etiqueta, messageTag. El proceso de montaje monta el messageTag en todas sus apariciones en la página html. La etiqueta MessageTag debe definirse mediante riot.js antes del montaje.

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

A continuación se muestra el ejemplo completo.

Ejemplo

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

Esto producirá el siguiente resultado: