Binding

Rava.bind(selector,config) the selector and the associated configuration is stored within Rava. During the method call all existing matching elements are configured.

Additionally the addition of new elements to the dom is monitored and any new elements that match the selector will be updated as well.

Multiple selector/configurations that match a specific element can be bound.

Scope

All methods that are defined in the configuration object are bound to the element. Meaning that any calls done to these methods uses the element as its scope.

This is done to make it easier to write callbacks to these methods from each other and the event handlers, which are similarly bound.

Event Handling

Events have three forms of declaration; direct, and scoped and global. A direct binding is in the form of event-name:function-declaration which registers itself to the currently targeted element. If an object is used instead of a function then the declaration is assumed to be selector:event-config. Either declaration takes a css definition. The difference is that a scoped declaration has the word ':scoped' at the beginning of the css. This causes the event handler to only listen to matching events that ocur beneath the current element. A css declaration that does not begin with scope is matched against the whole document.

rava.bind('table',{
  events : {
      // This is an example of direct event handling where the name of the property 
      // is the event name that is being listened for, in this case, it's the click
      // event that is being listened for by the table element
      // This should only fire if you clicked on the table header or footer
      click : function() {
          window.alert("clicked");
      },
      // :scope is a proper css psuedo-class which defines those elements that are a child of 
      // the given element. Here however, since support is not universal, a prefix of :scope
      // is used to trigger a new scoped binding that is looking for elements beneath the 
      // target element to be bound to
      ":scope tbody tr" : {
          click : function(event){
              // allthough we have the event listener on the 'tr' element. The callback is
              // executed with the 'table' being the scope. To find out which 'tr' element
              // was clicked we use the currentTarget of the event.  
              var clicked = event.currentTarget;
              rava.findAll(this,'tr').forEach(function(row){
                  row.classList.remove('is-selected');
              });
              clicked.classList.add('is-selected');
              // we want to prevent the event bubbling here or it wil be picked up by the
              // 'click' listener on the table
              event.stopPropagation();
          }
      },
      // This is a global intercept. Because no ':scope' is defined, we've created a binding
      // that will occur anywhere in the document. 
      ".button.is-warning" : {
          click : function(){
              window.alert("oh my gosh");
          }
      }
  }
});
    
Pos Team Pld W D L GF GA GD Pts
Pos Team Pld W D L GF GA GD Pts
1 Leicester City (C) 38 23 12 3 68 36 +32 81
2 Arsenal 38 20 11 7 65 36 +29 71
3 Tottenham Hotspur 38 19 13 6 69 35 +34 70
4 Manchester City 38 19 9 10 71 41 +30 66
5 Manchester United 38 19 9 10 49 35 +14 66
6 Southampton 38 18 9 11 59 41 +18 63
7 West Ham United 38 16 14 8 65 51 +14 62