RIOT.JS - Primeira Aplicação

RIOT funciona criando tags html reutilizáveis ​​e personalizadas. Essas tags são semelhantes aos componentes da Web e são reutilizáveis ​​em páginas e aplicativos da Web.

Passos para usar RIOT

  • Importe riot.js na página html.

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

  • Inicie uma seção de script e defina o conteúdo da tag como html. O script também pode ser incluído, o que veremos mais tarde no tutorial.

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

  • Defina uma tag usando o método riot.tag (). Passe para ele o nome da tag, messageTag e variável que contém o conteúdo da tag.

riot.tag("messageTag", tagHtml);

  • Monte a tag usando o método riot.mount (). Passe para ele o nome da tag, messageTag. O processo de montagem monta a messageTag em todas as suas ocorrências na página html. A tag MessageTag deve ser definida usando riot.js antes da montagem.

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

A seguir está o exemplo completo.

Exemplo

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

Isso produzirá o seguinte resultado -