JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<main></main>

<script id='temp1' type='text/ractive'>
    <h1>This is Template 1.</h1>
    {{# steps[currentStep] }}
        {{# { stepName: name, options: options } }}
        <h3>{{stepName}}</h3>
        {{# options:i }}
            <p>
                <label>
                    <input type='radio' name='{{~/selectedOpt[stepName]}}' value='{{this}}'/>
                    {{name}}
                </label>
            </p>
        {{/}}
        {{/}}
    {{/}}
    {{# currentStep < stepsQuantity-1}}
        <a href='#' on-click='gotoStep: {{currentStep + 1}}'>next step</a>
    {{/}}
    {{^ currentStep < stepsQuantity-1}}
        <a href='#' on-click='gotoStep: {{currentStep - 1}}'>previous step</a>
    {{/}}
</script>
<script id='temp2' type='text/ractive'>
    <h1>This is Template 2.</h1>
</script>

<script id='tempMain' type='text/ractive'>
    {{ #page === 'temp1' }}
        {{ >temp1}}
    {{ / }}
    {{ #page === 'temp2' }}
        {{ >temp2}}
    {{ / }}
    <p>selected value: {{ JSON.stringify(selectedOpt) }}</p>
    <hr/>
    <p><a href='#' on-click='switchTemp'>toggle template</a></p>
</script>

JavaScript

var ractive = new Ractive({
    el: 'main',
    template: '#tempMain',
    data: {
        page: 'temp1',
        currentStep: 0,
        stepsQuantity: 2,
        steps: [
            { name: 'group1', options: [
                {name: 'gr1opt1', value: '123'},
                {name: 'gr1opt2', value: '124'}
            ]},
            { name: 'group2', options: [
                {name: 'gr2opt1', value: '234'},
                {name: 'gr2opt2', value: '235'}
            ]},
        ]
    }
});

ractive.on( 'gotoStep', function ( event, step ) {
    // user can't click proximate steps in wizard
    // check if user click on next button
    var currentStep = this.get('currentStep');
    var toStep = step;

    //this.set( 'currentStep', null ); //workaround for bug
    this.set( 'currentStep', toStep );
});

function switchTemplate(toTemplate) {
    ractive.set('page', toTemplate);
}

ractive.on( 'switchTemp', function () {
    if ( ractive.get('page') === 'temp1') {
        switchTemplate('temp2');
    } else {
        switchTemplate('temp1');
    }
});