Учебники

RIOT.JS — Mixin

Июль 19, 2018

Через Mixin мы можем делиться общей функциональностью между тегами. Mixin может быть функцией, классом или объектом. Рассмотрим случай службы аутентификации, которую должен использовать каждый тег.

  • Define Mixin — Определите mixin с помощью метода riot.mixin () перед вызовом mount ().

Define Mixin — Определите mixin с помощью метода riot.mixin () перед вызовом 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!'
      }   
   }
});

  • Инициализировать миксин — Инициализировать миксин в каждом теге.

Инициализировать миксин — Инициализировать миксин в каждом теге. 

this.mixin('authService')

  • Использовать миксин — после инициализации миксин можно использовать внутри тега.

Использовать миксин — после инициализации миксин можно использовать внутри тега. 

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

пример

Ниже приведен полный пример.

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>

Это даст следующий результат —

37
Share: