Ractive Nested Components bubble events

Verify if nested level components behave

by vikikamath

HTML

<main></main>

JavaScript

var InComp = Ractive.extend({
		template: '<div on-click="clicked">Click Me</div>'
  
})
var MyComp = Ractive.extend({

	template: 'Showing <InComp/>'
  ,components: {
  	InComp: InComp
  }
  ,oninit() {
  	this.on('InComp.clicked', function(e){
  		console.log('InComp.clicked')
      this.fire('Incomp.clicked', e);
  	}) 
  }
  
})

var r = new Ractive({
	el: 'main'
  , template: '<MyComp/>'
  , components: {
  	MyComp: MyComp
  }
  ,oninit() {
  	this.on('MyComp.Incomp.clicked', function(e){
    	console.log('MyComp.Incomp.clicked')
    })
  }

})