JSFiddle - React, Tailwind, and code Playground

by benroe

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<div id='template'/>
<script id='tempMain' type='text/ractive'>
{{#steps[currentStep].options:i}}
    <div class='radio'>
      <label>
          <input type='radio' name='{{../value}}' value='{{i}}'/>
        {{name}}
      </label>
    </div>
{{/}}
<p>selected value: {{steps[currentStep].options.value}}</p>
<button on-click='gotoStep: {{currentStep + 1}}'>next</button>
{{#currentStep===steps.length}}
{{#steps}}
    <li>{{name}} {{options.value}} {{JSON.stringify(options[options.value])}}</li>
    {{/}}    
{{/}}
</script>

JavaScript

var ractive, stepsData;

stepsData = [
    { name: 'Products', options: [
        { name: 'Product 1', price: 100 },
        { name: 'Product 2', price: 120 }
    ]},
    { name: 'Color', options: [
        { name: 'Black', price: 0},
        { name: 'White', price: 5 },
        { name: 'Blue', price: 20 }
    ]}
];

ractive = new Ractive({
    el: '#template',
    template: '#tempMain',
    data: {
        steps: stepsData,
        currentStep: 0
    }
});

ractive.on( 'gotoStep', function ( event, step ) {
  this.set( 'currentStep', step );
});