RactiveJS

Fire events from root and handle in nested components

by vikikamath

JavaScript

var MyWidget = Ractive.extend({
  template: '<div>Last updated: {{updated}}</div>',
  
  oninit: function() {
    ///// NOTE: this.root.on
  	this.root.on('updated', function(e){
    	console.log('updated  called...')
    	this.set('updated', e.ts)
    }.bind(this));
  },
  data: {
  }
});

Ractive.components.widget = MyWidget;

// or, if you don't want to make it globally available,
// you can use it with only a single Ractive instance
var ractive = new Ractive({
  el: 'body',
  template: "<widget/><button on-click='clicked'>Update</button>",
  components: {
    widget: MyWidget
  },
  oninit: function() {

  		this.on('clicked', function(e) {
      	console.log('clicked called...')
      	ractive.fire('updated', {ts: Date.now()} );
      }.bind(this))
      
      this.on('fired', function(e) {
      	console.log('fired called...')
      })
  }
  
});

/*
ractive.on('clicked', function(){
    	var ts = Date.now();
    	console.log(ts);
    	ractive.fire('updated');
    });
    */