RavaJS is a small library that allows you to define a component that is bound to elements using a CSS selector. This binding is dynamic so that you may define a component at any point and it will effect existing and future matching elements.
<script src="https://cdn.jsdelivr.net/npm/rava@2.1.1/dist/rava.min.js"></script>
Now you can use css selectors to find html elements and add new functionality
rava.bind('rava-time',{
callbacks:{
created: function(){
this.start();
}
},
methods : {
start : function() {
this.tick();
this.__timeInterval = setInterval(this.tick,1000);
},
stop : function() {
this.__timeInterval = clearInterval(this.__timeInterval);
},
tick : function() {
this.textContent = new Date().toLocaleTimeString();
}
},
events : {
click : function() {
if (this.__timeInterval){
this.stop();
} else {
this.start();
}
}
}
});
Combined with some HTML
<h2>"The time" she opined ,"is now <rava-time></rava-time>"</h2>
Creates
"The time" she opined ,"is now
"