JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/latest/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>
  <control 
    type="{{type}}"
    value="some string"
    name="TheControl"
  />
</script>

<script id="control" type="text/ractive">
    Field:
    {{#type==="singleline"}}
        <input type='text' value='{{value}}'/>
    {{/}}
    {{#type==="multiline"}}
        <textarea value='{{value}}'></textarea>
    {{/}}
</script>

JavaScript

var control = Ractive.extend({
  template: "#control",
  beforeInit: function(){
      console.time("controls");
  },
  init: function(){
    this.observe("type", function(n, o, k){
      if (typeof o !== "undefined") {
        this.partials.tpl = this.templates[n];
      }
    });
    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);
  }
});