RIOT.JS - Thẻ

RIOT hoạt động bằng cách xây dựng các thẻ html tùy chỉnh, có thể tái sử dụng. Các thẻ này tương tự như các thành phần Web và có thể sử dụng lại trên các trang và ứng dụng web. Khi bạn đưa khung công tác RIOT vào trang HTML của mình, js đã nhập sẽ tạo ra một biến bạo động trỏ đến một đối tượng bạo loạn. Đối tượng này chứa các chức năng cần thiết để tương tác với RIOT.js như tạo và gắn các thẻ.

Chúng ta có thể tạo và sử dụng thẻ theo hai cách.

Inline HTML- Bằng cách gọi hàm riot.tag (). Hàm này lấy tên thẻ và định nghĩa thẻ để tạo thẻ. Định nghĩa thẻ có thể chứa HTML, JavaScript và CSS, v.v.
Seperate Tag file- Bằng cách lưu trữ định nghĩa thẻ trong tệp thẻ. Tệp thẻ này chứa định nghĩa thẻ để tạo thẻ. Tệp này cần được nhập vào vị trí của lệnh gọi riot.tag ().

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

Sau đây là ví dụ về thẻ nội tuyến.

Thí dụ

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

Điều này sẽ tạo ra kết quả sau:

Sau đây là ví dụ về thẻ tệp bên ngoài.

Thí dụ

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>

Điều này sẽ tạo ra kết quả sau: