Allow components to fire events on their ancestors?

src/Ractive/prototype/fire.js

@@ -1,13 +1,37 @@
+var nameOnly = /^(?:\.?\.\/)*(.*)/;
+var parents = /^((?:\.\.\/)*).*/;
+
 export default function Ractive$fire ( eventName ) {
-	var args, i, len, subscribers = this._subs[ eventName ];
+	var args, i, len, subscribers, target, ev, upCount; 
 
-	if ( !subscribers ) {
-		return;
-	}
+	upCount = eventName.match(parents)[1].split('/').length - 1;
+
+	if ( upCount > 0 ) {
+		target = this;
+		ev = eventName.match(nameOnly)[1];
+
+		for ( i=0; i<upCount; i+=1 ) {
+			if ( !!target ) target = target._parent;
+		}
+
+		if ( !!target && typeof target.fire === 'function' ) {
+			args = Array.prototype.slice.call(arguments, 1);
+			args[ 0 ].parent = target;
+			args[ 0 ].child = this;
+			args.unshift(ev); // make sure to pass along a non-ancestor event name
+			target.fire.apply( target, args );
+		}
+	} else {
+		subscribers = this._subs[ eventName ];
+
+		if ( !subscribers ) {
+			return;
+		}
 
-	args = Array.prototype.slice.call( arguments, 1 );
+		args = Array.prototype.slice.call( arguments, 1 );
 
-	for ( i=0, len=subscribers.length; i<len; i+=1 ) {
-		subscribers[i].apply( this, args );
+		for ( i=0, len=subscribers.length; i<len; i+=1 ) {
+			subscribers[i].apply( this, args );
+		}
 	}
 }

test/modules/events.js

@@ -604,6 +604,45 @@ define([ 'ractive' ], function ( Ractive ) {
 			simulant.fire( ractive.findAll( 'button' )[1], 'click' );
 		});
 
+		test( 'events can be fired on ancestors when components are nested', function ( t ) {
+			var shouldntHappen = function ( event ) { t.ok( false ); };
+
+			var cmp = Ractive.extend({
+				template: '<button on-click="../childClicked" on-dblclick="meClicked">click me</button><button on-click="../../foo">no fire, please</button>'
+			});
+
+			var ractive = new Ractive({
+				components: { cmp: cmp },
+				el: fixture,
+				template: '<span><cmp /></span>'
+			});
+
+			ractive.on( 'childClicked', function ( event ) {
+				t.ok( true );
+				t.equal( event.original.type, 'click' );
+				t.equal( event.parent, ractive );
+				t.equal( event.child, ractive.findComponent('cmp') );
+			});
+
+			ractive.on( 'meClicked', shouldntHappen);
+			ractive.on( 'foo', shouldntHappen );
+
+			var btns = ractive.findComponent( 'cmp' );
+
+			btns.on( 'meClicked', function ( event ) {
+				// this should have gone through the non-ancestor code path and thus have no parent/child
+				t.ok( !!!event.parent );
+				t.ok( !!!event.child );
+			});
+
+			btns.on( 'childClicked', shouldntHappen );
+			btns.on( 'foo', shouldntHappen );
+
+			simulant.fire( btns.findAll( 'button' )[ 0 ], 'click' );
+			simulant.fire( btns.findAll( 'button' )[ 0 ], 'dblclick' );
+			simulant.fire( btns.findAll( 'button' )[ 1 ], 'click' );
+		});
+
 
 	};