Rava Methods

bind

rava.bind(css-selector,configuration-object)
v2.0.0

Rava uses the bind method to associate a configuration object with all elements on a page that matches the CSS selector string.

In addition, the configuration is registered so that any elements that are later added to the page will be processed with the same configuration.

find

rava.find(html-element,css-selector)
v2.0.0

find traverses the children of the given element and finds the first matching element. Returns null if no matching element is found

findAll

rava.findAll(html-element,css-selector)
V2.0.0

findAll traverses the children of the given element and finds all elements that matches the provided selector. Returns an empty array if no matches are found

Configuration Object

// rava config object is a standard js object with specific keys that are used
// to configure the selected element
{
    // data represents a special object which is handed off to each callback 
    // and event handler that is defined in the configuration. The data object
    // is either a state that is unique to the selected root element or a
    // shared state that is used for all elements that match the root selector
    data : {}, // object or function
    // if the data is an object, that object is applied to all selected elements
    // without any additional changes. if the data field is a function, then the
    // function is called for each matching root element. 

    callbacks:{
        // there are three defined callbacks: added, created, and removed.
        // callbacks are triggered by rava itself as the element is initially
        // created, added to the dom, and removed from the dom.
        // 
        // callbacks support nested selectors, if an object is defined rather
        // than the three callbacks, the key is then assumed to be a selector
        // for other elements
        //  
        // the signature of a callback is 
        // function(data,element)
        // 
        created: function(data,element){
            this.start();
        },
        added: function(data,element){
            this.start();
        },
        removed: function(data,element){
            this.start();
        },
        "body > h1.foo" : {
            added : function(data, element){
                // element on this call is the h1.foo element that the css
                // identified, while the data object and the 'this' is from
                // the original configuration
            }
        }

    },
    methods : {
        // methods are both moved to, and context bound to the selected element
        // and do NOT support nested selectors 
        start : function() {
        },
        stop : function() {
        }
    },
    events : {
        // events support nested selectors and are context bound to the selected
        // element
        click : function(event, data) {
            // event is the standard js event object 
            // data is the defined data object 
            // note: 'this' is the bound element
        },
        "onclick" : function (event,data) {
            // names in quotes are the same as those without
        }
        ":scope a.foo" : {
            // this is a css selector to tie other elements to the scope and binding 
            // of the originally bound element
            // :scope keyword at the begining will force a match on the child elements
            // of of the original element
            "click" : function (event, data) {
                // 'this' is still the top level bound element
            }
        }

    }
};