JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<main></main>

<script id='template' type='text/template'>
    <button on-click='break()'>Break it!</button>
    <input value='{{ foo }}'/>
    {{#if foo.length > 0 || bar.length > 0}}
        <span intro-outro='transition'>
            <input value='{{ bar }}'/>
            {{#if foo === bar}}
                <span intro-outro='transition'>Inputs match</span>
            {{/if}}
        </span>
    {{/if}}
</script>

JavaScript

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    transitions: {
        'transition': function (t) {
            setTimeout(function(){
                t.complete();
            }, 500);
        }
    },
    data: {
        foo: '',
        bar: ''
    },
    break: function() {
        this.set('foo', 'turducken');
        this.set('foo', '');
    }
});