JSFiddle - React, Tailwind, and code Playground

by vikikamath

JavaScript

var MyWidget = Ractive.extend({
  template: '<div>{{pdfData}}<div on-click="{{print}}">PrintMe</div><div on-click="{{save}}">SaveMe</div></div>',
  
  oninit: function() {
  	this.on('print', function(){
    	console.log('widget print')
    });
    
    this.on('save', function(){
    	console.log('widget save')
    })
  },
  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: "<div class='application'><h1>Super Template</h1>\
  <widget print='print' save='save' pdfData='ssjkcksdcnksdnksdnvksdnvksdnvkdskvdks'/></div>",
  components: {
    widget: MyWidget
  },
  oninit: function(){
  	this.on('widget.print', function(e){
    	console.log('print');
    })
    
    this.on('widget.save', function(e){
    	console.log('save');
    })
  }
});