JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<div id="container">
</div>
<script id="main" type="text/ractive">
    <select value="{{type}}">
        <option value="singleline">Singleline</option>
        <option value="multiline">Multiline</option>
    </select>

    <div>
        <control 
            type="{{type}}"
            value="some string"
            name="TheControl"
        />
    </div>
</script>

JavaScript

var control = Ractive.extend({
  templates: {
      singleline: "Field:<input type='text' value='{{value}}' />",
      multiline: "Field:<textarea value='{{value}}'></textarea>"
  },
  beforeInit: function(options){
    console.time("controls");
    options.template = this.templates[options.data.type];
  },
  init: function(){
    this.observe("type", function(n, o, k){
        console.log( 'resetting template: ' + this.templates[n] );
        this.resetTemplate( this.templates[n] );
    }, { init: false });
    console.timeEnd("controls");
  }
});

var ractive = new Ractive({
  el: "#container",
  template: "#main",
  data: {
    type: "singleline"
  },
  components: {
    control: control
  }
});

ractive.observe("type", function(n, o, k){
  if (typeof o !== "undefined") {
    console.log("========== type changed !!", n);
  }
});