RIOT.JS - แท็ก

RIOT ทำงานโดยการสร้างแท็ก html แบบกำหนดเองที่ใช้ซ้ำได้ แท็กเหล่านี้คล้ายกับส่วนประกอบของเว็บและสามารถใช้ซ้ำได้ในหน้าเว็บและเว็บแอป เมื่อคุณรวมเฟรมเวิร์ก RIOT ในเพจ HTML ของคุณ js ที่นำเข้าจะสร้างตัวแปรการจลาจลที่ชี้ไปที่วัตถุจลาจล อ็อบเจ็กต์นี้มีฟังก์ชันที่จำเป็นในการโต้ตอบกับ RIOT.js เช่นการสร้างและการติดแท็ก

เราสามารถสร้างและใช้แท็กได้สองวิธี

Inline HTML- โดยการเรียกใช้ฟังก์ชัน riot.tag () ฟังก์ชันนี้ใช้ชื่อแท็กและนิยามแท็กเพื่อสร้างแท็ก ความหมายของแท็กอาจมี HTML, JavaScript และ CSS เป็นต้น
Seperate Tag file- โดยการจัดเก็บคำจำกัดความของแท็กในไฟล์แท็ก ไฟล์แท็กนี้มีนิยามแท็กเพื่อสร้างแท็ก ต้องนำเข้าไฟล์นี้แทนการเรียก riot.tag ()

<script src = "/riotjs/src/messageTag.tag" type = "riot/tag"></script<

ต่อไปนี้เป็นตัวอย่างของแท็กอินไลน์

ตัวอย่าง

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

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ต่อไปนี้เป็นตัวอย่างของแท็กไฟล์ภายนอก

ตัวอย่าง

messageTag.tag

<messageTag>
   <h1>Hello World!</h1>
</messageTag>

index.htm

<!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 src = "messageTag.tag" type = "riot/tag"></script>
      <script>
         riot.mount("messageTag");
      </script>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -