JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ractive.js/0.3.6/ractive.min.js"></script>
<script id='template' type='text/ractive'>
 <div class="widget">
 <div>Count: {{count}}</div>
 <div on-click="addOne" class="button">Add One to Count</div>
 </div>
</script>

<div id="elA"></div>

CSS

.widget
{
    border:2px solid #f66;    
}

.button
{
    border:2px solid #666; 
    cursor:pointer; margin:3px;
}

JavaScript

var MySimpleWidget = Ractive.extend({
    
    template:'#template',
    
    init: function(options){
        
        this.on({
            addOne: function(){
                console.log('adding one...');
                var count = this.get('count'); 
                this.set('count', count+1);
            }
        });
        
        this.set('count', options.inititalCount);
        
        console.log('Init Complete');
    }   
});

var mysimp = new MySimpleWidget({
    el:'#elA',
    inititalCount:23
});