ractivejs/ractive — pull request #1099 by evs-chris (2014-08-11 21:12:03+00:00)
Title: Allow components to fire events on their ancestors?

This is more of a proposal for discussion than a pull request.

When deeply nesting components, it is possible to manually bubble events up the component stack by having a boilerplate event handler that fires an event. There is already a notation for referencing up-hierarchy for references, so does it make sense to do the same for events?

This is mostly useful for components that act as containers, and as such, have a content partial as part of their template.

Given the following component
```javascript
var cmp = Ractive.extend({
template: '

{{> content }}

'
});
```
this would allow you to turn
```javascript
var ractive = new Ractive({
components: { cmp: cmp },
template: 'other stuff Click Me more other stuff',
el: '#main'
});

ractive.on('clicked', function(e) { console.log('clicked'); });
```
into the slightly more friendly
```javascript
var ractive = new Ractive({
components: { cmp: cmp },
template: 'other stuff Click Me more other stuff',
el: '#main'
});

ractive.on('clicked', function(e) { console.log('clicked'); });
```

Granted, this short example doesn't show off the benefit very well, but when you get three or four levels deep with multiple events, it really starts to clear some fog. I suppose it may improve performance slightly as well since it skips intermediate events, but that wasn't really an avenue I was trying to explore.