JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<script id="template" type="text/ractive">
	<table>
        <tbody>
        {{#each items:i}}
            <tr>
                <td style='color: {{this}};'>{{this}}</td>
                
                <td>
                    {{#if i}}
                        <button on-click="swap('items',i,i-1)">Up</button>
                    {{/if}}
                </td>
                
                <td>
                    {{#if i < items.length-1 }}
                        <button on-click="swap('items',i,i+1)">Down</button>
                    {{/if}}
                </td>
            </tr>
        {{/each}}
        </tbody>
    </table>
</script>

JavaScript

var items = ['red','green','yellow','blue']

var ractive = new Ractive({
    el: document.body,
    template: '#template',
    data: {
        items: items
    },
    magic: true,
    swap: function(keypath, from, to) {
        var copy = this.get(keypath).slice(),
            move = copy.splice(from, 1)[0]
        copy.splice(to, 0, move)
        this.merge(keypath, copy)
    }
});