rava/docs/content/welcome.html

The Rava core library

<div class="content">
    <p>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.</p>
    <h2 class="title is-2">How to start</h2>
    <h4 class="subtitle is-4"> Setup</h4>
    <pre class="prettyprint lang-html">

&lt;script src="https://cdn.jsdelivr.net/npm/rava@2.1.1/dist/rava.min.js"&gt;&lt;/script&gt;
            </pre>
    <h4 class="subtitle is-4">Usage</h4>
        <p>Now you can use css selectors to find html elements and add new functionality</p>
        <pre class="prettyprint lang-js">
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();
            }
        }
    }
});
        </pre>
        Combined with some HTML
        <pre class="prettyprint lang-js">

&lt;h2>"The time" she opined ,"is now &lt;rava-time>&lt;/rava-time>"&lt;/h2>
        </pre>
        Creates
        <blockquote>
            <h2>"The time" she opined ,"is now <rava-time></rava-time>"</h2>
        </blockquote>
</div>