JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<script src="https://rawgit.com/ractivejs/ractive-transitions-slide/master/ractive-transitions-slide.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-outro='slide'>
      <td><input value="[[id]]" type="checkbox" /></td>
      <td>{{name}}</td>
      <td>{{id}}</td>
      <td>{{last_update}}</td>
    </tr>
{{/workers}}
  </tbody>
</script>

CSS

tr {
    display: block;
}

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'
});

console.log( 'slide', Ractive.transitions.slide );


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

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