JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<div id='template'></div>


<script id='tempMain' type='text/ractive'>
{{# products}}
    <h1>{{name}}</h1>
    
    <p>Selected: {{selectedRadio.name || 'none'}}</p>
    
    {{# options:i}}
        <div class='radio'>
            <label>
                <!-- note {{this}} instead of {{options[i]}} -->
                <input type='radio' name='{{selectedRadio}}' value='{{this}}'/>{{name}}
            </label>
        </div>
    {{/}}
{{/}}
</script>

JavaScript

productData = [
{ name: 'Cameras', options: [
    { name: 'Canon', price: '396'},
    { name: 'Sony', price: '449'}
]}];

ractive = new Ractive({
    el: '#template',
    template: '#tempMain',
    data: {
        products: productData,
        selectedRadio: 'no Radio selected'
    }
    
});