JSFiddle - React, Tailwind, and code Playground

by vikikamath

JavaScript

var MyWidget = Ractive.extend({
  template: '<input on-focus-in="{{#if rFocus}}{{rFocus}}{{/if}}" value="{{message}}" /><select value="{{selectedVal}}" on-focus-in="{{#if rFocus}}{{rFocus}}{{/if}}"  on-change="{{#if rChange}}{{rChange}}{{/if}}"><option selected disabled>Select a country</option><option value="USA">United States</option><option value="CHN">China</option><option value="CAN">Canada</option></select>',
  oninit: function () {
    this.on( 'focused', function (e) {
      console.log("focus-inner-"+e.node.localName);
    });
    this.on( 'changed', function (e) {
      console.log("change-inner-"+e.node.localName);
    });
  },
  data: {
    message: 'No message specified, using the default'
  }
});

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: "<form on-focus='formFocus' on-change='formChange'><div class='application'><h1>I've got a widget</h1><widget rFocus='focused' rChange='changed' on-focused='outFocus' on-changed='outChange' message='Click to activate!'/></div></form>",
  components: {
    widget: MyWidget
  },
  oninit: function(){
  	this.on('outChange', function(e){
    	console.log("change-outer-"+e.node.localName);
    })
    this.on('outFocus', function(e){
    	console.log('focus-outer-'+e.node.localName)
    })
    this.on('formFocus', function(e){
    	console.log('formfocus-'+e.node.localName);
    })
    this.on('formChange', function(e){
    	console.log('formchange-'+e.original.target.localName);
    })
  }
});