RIOT.JS - Ứng dụng đầu tiên

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.

Các bước sử dụng RIOT

Nhập riot.js trong trang html.

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

Bắt đầu một phần tập lệnh và xác định nội dung thẻ là html. Script cũng có thể được bao gồm mà chúng ta sẽ xem sau trong hướng dẫn.

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

Xác định thẻ bằng phương thức riot.tag (). Chuyển cho nó tên của thẻ, messageTag và biến chứa nội dung thẻ.

riot.tag("messageTag", tagHtml);

Gắn thẻ bằng phương thức riot.mount (). Chuyển cho nó tên của thẻ, messageTag. Quá trình gắn kết sẽ gắn thẻ messageTag trong tất cả các lần xuất hiện của nó trong trang html. Thẻ MessageTag phải được xác định bằng riot.js trước khi gắn.

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

Sau đây là ví dụ đầy đủ.

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: