RIOT.JS - Mixin-alljchome-开发者的教程家园

RIOT.JS Tutorial

Selected Reading

RIOT.JS - Mixin

Through Mixin, we can share common functionapty among tags. Mixin can be a function, class or object. Consider a case of Authentication Service which each tag should be using.

Define Mixin − Define mixin using riot.mixin() method before calpng 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! 
      }   
   }
});

Initiapze mixin − Initiapze mixin in each tag.

this.mixin( authService )

Use mixin − After initiapzing, mixin can be used within tag.

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

Example

Following is the complete example.

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/pbs/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>

This will produce following result −