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='replace'>replace data</button>

    <ul>
        {{#arr}}
        <li>active? {{active}}</li>
        {{/arr}}
    </ul>
    
    <p>foo = {{obj.foo}}</p>
    <p>bar = {{obj.bar}}</p>
    <p>baz = {{obj.baz}}</p>
</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 ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        arr: [
            { active: true },
            { active: false },
            { active: true },
            { active: false },
            { active: true }
        ],
        obj: {
            foo: 1,
            bar: 2,
            baz: 3
        }
    }
});

ractive.on( 'replace', function () {
    this.set( 'arr.*.active', false );
    this.set( 'obj.*', 42 );
});