RIOT.JS - Mixin

Thông qua Mixin, chúng tôi có thể chia sẻ chức năng chung giữa các thẻ. Mixin có thể là một hàm, lớp hoặc đối tượng. Hãy xem xét một trường hợp của Dịch vụ xác thực mà mỗi thẻ sẽ được sử dụng.

Define Mixin - Định nghĩa mixin bằng phương thức riot.mixin () trước khi gọi mount ().

riot.mixin('authService', {
   init: function() {
      console.log('AuthService Created!')
   },

   login: function(user, password) {
      if(user == "admin" && password == "admin"){
         return 'User is authentic!'
      }else{
         return 'Authentication failed!'
      }   
   }
});

Initialize mixin - Khởi tạo mixin trong mỗi thẻ.

this.mixin('authService')

Use mixin - Sau khi khởi tạo, mixin có thể được sử dụng trong thẻ.

this.message = this.login("admin","admin");

Thí dụ

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

custom8Tag.tag

<custom8Tag>
   <h1>{ message }</h1>
   <script>
      this.mixin('authService')
      this.message = this.login("admin","admin")
   </script>
</custom8Tag>

custom9Tag.tag

<custom9Tag>
   <h1>{ message }</h1>
   <script>
      this.mixin('authService')
      this.message = this.login("admin1","admin")
   </script>
</custom9Tag>

custom8.htm

<html>
   <head>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/riot/3.13.2/riot+compiler.min.js"></script>
   </head>
   <body>
      <custom8Tag></custom8Tag>
      <custom9Tag></custom9Tag>
      <script src = "custom8Tag.tag" type = "riot/tag"></script>
      <script src = "custom9Tag.tag" type = "riot/tag"></script>
      <script>
         riot.mixin('authService', {
            init: function() {
               console.log('AuthService Created!')
            },
            login: function(user, password) {
               if(user == "admin" && password == "admin"){
                  return 'User is authentic!'
               }else{
                  return 'Authentication failed!'
               }   
            }
         });
         riot.mount("*");
      </script>
   </body>
</html>

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