- RIOT.JS Tutorial
- RIOT.JS - Home
- RIOT.JS - Overview
- RIOT.JS - Environment Setup
- RIOT.JS - First Application
- RIOT.JS - Tags
- RIOT.JS - Expressions
- RIOT.JS - Styling
- RIOT.JS - Conditional
- RIOT.JS - Yield
- RIOT.JS - Event Handling
- RIOT.JS - Accessing DOM
- RIOT.JS - Loops
- RIOT.JS - Mixin
- RIOT.JS - Observables
- RIOT.JS Useful Resources
- RIOT.JS - Quick Guide
- RIOT.JS - Useful Resources
- RIOT.JS - Discussion
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
RIOT.JS - Mixin
Through Mixin, we can share common functionality 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 calling 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 − Initialize mixin in each tag.
this.mixin('authService')
Use mixin − After initializing, 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/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>
This will produce following result −
Advertisements