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/ractive'>
    <button on-click="add-one-object">Add One</button>
    <button on-click="add-two-objects">Add Two</button>
    <button on-click="add-three-objects">Add Three</button>
    <button on-click="remove">Remove</button>
    
    {{#each objects }}
        {{#if hasname( this, objects ) }}
            <p>We have object {{ .name }}</p>
        {{/if}}
    {{else}}
        <p>We have no objects</p>
    {{/each}}
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

JavaScript

var a = { name: 'A' };

var b = { name: 'B' };
var c = { name: 'C' };

var d = { name: 'D' };
var e = { name: 'E' };
var f = { name: 'F' };

var inc = 0;

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        hasname: function (o, objects) {
            console.trace( o.name );
            console.log('[' + inc + ']o:' + JSON.stringify(o));
            console.log('[' + inc + ']objects:', objects);
            return o.name;
        }
    },
    handlebars: true
});

ractive.on('add-one-object', function (ev) {
    ++inc;
    console.group( 'adding one' );
    ractive.set('objects', [a]);
    console.groupEnd();
});

ractive.on('add-two-objects', function (ev) {
    ++inc;
    console.group( 'adding two' );
    ractive.set('objects', [b, c]);
    console.groupEnd();
});

ractive.on('add-three-objects', function (ev) {
    ++inc;
    console.group( 'adding three' );
    ractive.set('objects', [d, e, f]);
    console.groupEnd();
});

ractive.on('remove', function (ev) {
    ++inc;
    console.group( 'removing' );
    ractive.set('objects', undefined);
    console.groupEnd();
});