JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<table id="status">

</table>

<script id='template' type='text/ractive'>
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>id</th>
            <th>last update</th>
        </tr>
    </thead>
    <tbody>
{{#workers}}
    <tr intro='highlight' outro='hide'>
      <td><input value="[[id]]" type="checkbox" /></td>
      <td>{{name}}</td>
      <td>{{id}}</td>
      <td>{{last_update}}</td>
    </tr>
{{/workers}}
  </tbody>
</script>

JavaScript

function gen_data() {
    var now = new Date().toISOString();
    return { 
        'something' : 'other', 
        'workers': 
            [
                {'id': 3, 'name' : 'foo', 'last_update' : now}, 
                { 'id' : 4, 'name' : 'bar', 'last_update' : '2014-05-28T21:21:11.231Z'}
            ]
    };
}


var ractive = new Ractive({
    el: 'status',
    template: '#template',
    data: {},
    transitions: {
        highlight: function ( t ) {
            var originalColor = t.getStyle( 'background-color' );
            
            t.setStyle( 'background-color', 'green' );    
            
            setTimeout( function () {
                t.animateStyle( 'background-color', originalColor, {
                    duration: 200
                }).then( t.complete );
            }, 200 );
        },
        hide: function ( t ) {
            t.setStyle( 'display', 'none' );
            t.complete();
        }
    }
});


function update_workers() {
    var data = gen_data();
    ractive.merge('workers', data.workers, {
        compare: 'last_update'
    });
}

$(function() {
	update_workers();
    setInterval( update_workers, 1000 );
});