RIOT.JS - İlk Uygulama

RIOT, özel, yeniden kullanılabilir html etiketleri oluşturarak çalışır. Bu etiketler Web bileşenlerine benzer ve sayfalarda ve web uygulamalarında yeniden kullanılabilir.

RIOT kullanma adımları

Html sayfasındaki riot.js dosyasını içe aktarın.

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

Bir komut dosyası bölümü başlatın ve etiket içeriğini html olarak tanımlayın. Öğreticide daha sonra göreceğimiz komut dosyası da dahil edilebilir.

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

Riot.tag () yöntemini kullanarak bir etiket tanımlayın. Etiketin adını, messageTag'i ve etiket içeriğini içeren değişkeni iletin.

riot.tag("messageTag", tagHtml);

Riot.mount () yöntemini kullanarak etiketi bağlayın. Etiketin adını, messageTag'i iletin. Bağlama işlemi messageTag'i html sayfasındaki tüm oluşumlarına bağlar. MessageTag etiketi, montajdan önce riot.js kullanılarak tanımlanmalıdır.

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

Tam örnek aşağıda verilmiştir.

Misal

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

Bu, aşağıdaki sonucu verecektir -