JSFiddle - React, Tailwind, and code Playground

by mkennedy

HTML

<div id="main">
	<h1>Hello?</h1>
  <button disabled='{{disabled}}' on-click='loadTemplate("#newTemplate")'>Change Template</button>
</div>

<script type="text/html" id="newTemplate">
	<h1>Hello {{who}}!</h1>
  <button disabled='{{disabled}}' on-click='test("ME", true)'>It's ME!</button>
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

.error {
    color: #d00;
    font-family: monospace;
}

JavaScript

setTimeout( () => {
  var template = document.getElementById('main');
  
  var ractive = new Ractive({
    el: 'main',
    template: template.innerHTML,
    enhance: true,
    loadTemplate: function(template) {
    	this.resetTemplate(template); 
    },
    test: function(who, disabled){
    	this.set('who', who); 
      this.set('disabled', disabled);
    },
    data: { 
    	who : 'world',
      disabled : false
    }
  });
}, 2000 );