JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<script id="ract" type="text/ractive">
    <textarea readonly value='{{options[condition]}}'></textarea>
<button on-click="switch" class="change-condition">
		{{ #if condition === 'one' }}
			<span>One</span>
		{{ else }}
			<span class="unused">Two</span>
		{{ /if }}

		{{ #if condition === 'two' }}
			<span>One</span>
		{{ else }}
			<span class="unused">Two</span>
		{{ /if }}
</button>
</script>
<script id="templ" type="text/ractive">
    <copyarea>
</script>

CSS

.unused {
    color: gray;
    
}

JavaScript

var copyarea = Ractive.extend({
    template: "#ract",
    data: function() {
        return {
        	condition: 'one',
        	options: {
                 "one":"Text 1", 
   				 "two":"Text 2"   
            }
        }
    },
    isolated: false,
    oncomplete: function () {
        this.on("switch", function (event) {
            if (this.get('condition') === 'one') {
                this.set('condition', 'two');
            } else {
                this.set('condition', 'one');
            }
        });
    }
});

var ui = new Ractive({
    el: 'body',
    append: true,
    template: '#templ',
    components: {
        copyarea: copyarea
    }
});