RIOT.JS - Aplikasi Pertama

RIOT bekerja dengan membuat tag html khusus yang dapat digunakan kembali. Tag ini mirip dengan komponen Web dan dapat digunakan kembali di seluruh halaman dan aplikasi web.

Langkah-langkah untuk menggunakan RIOT

Impor riot.js di halaman html.

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

Mulai bagian skrip dan tentukan konten tag sebagai html. Script juga dapat dimasukkan yang akan kita lihat nanti di tutorial.

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

Tentukan tag menggunakan metode riot.tag (). Berikan nama tag, messageTag, dan variabel yang berisi konten tag.

riot.tag("messageTag", tagHtml);

Pasang tag menggunakan metode riot.mount (). Berikan nama tagnya, messageTag. Proses pemasangan memasang messageTag di semua kemunculannya di halaman html. Tag MessageTag harus ditentukan menggunakan riot.js sebelum dipasang.

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

Berikut contoh lengkapnya.

Contoh

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

Ini akan menghasilkan hasil sebagai berikut -