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">
	{{#each nested:i}}
		<div>
			{{.}}
			<button onclick="swap(data.nested,{{i}},{{i}}-1)">Up</button>
			<button onclick="swap(data.nested,{{i}},{{i}}+1)">Down</button>
		</div>
	{{/each}}
</script>

JavaScript

var data = {nested: ['a','b','c','d']}
		
var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: data,
    magic: true,
    swap: swap
});

function swap(list, i, j)
{
    i = i % list.length
    if( i < 0 ) {
        i += list.length
    }
    
    j = j % list.length
    if( j < 0 ) {
        j += list.length
    }
    
    var temp = list[i]
    list.splice(i, 1, list[j])
    list.splice(j, 1, temp)
}