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.
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.
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 |