JSFiddle - React, Tailwind, and code Playground

by damngoto

HTML

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>native</h3>
<select id="native">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<hr>
<div id="output"></div>
<script type="text/template" id="template">
    <h3>without setTimeout</h3>
    <select value="{{v1}}" on-change="ch1">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
    <hr>
        <h3>with setTimeout</h3>
    <select value="{{v2}}" on-change="ch2">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
</script>

JavaScript

// Hit Shift-Enter to execute this code
$('#native').on('change', function(){
    alert(this.value)
})
var ractive = new Ractive({
  el: '#output',
  template: '#template'
});

ractive.on('ch1', function(e){
  	alert(ractive.get('v1'))
})

ractive.on('ch2', function(e){
    setTimeout(function(){
        alert(ractive.get('v2'))
    }, 0)
})

ractive.observe('v1', function(val){
  	alert(val)
})