JSFiddle - React, Tailwind, and code Playground

by ducas

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<section id="step-1" class="wizard">
    <h1>Step 1</h1>
    <form method="post" data-bind="submit:submit">
        <fieldset>
            <label for="name">Name: </label>
            <input type="text" name="name" data-bind="value:name" />
        </fieldset>
        <fieldset>
            <button type="submit">Next</button>
        </fieldset>
    </form>
</section>
 
<section id="step-2" class="wizard">
    <h1>Step 2</h1>
    <form method="post" data-bind="submit:submit">
        <fieldset>
            <label for="email">Email: </label>
            <input type="email" name="email" data-bind="value:email" />
        </fieldset>
        <fieldset>
            <a href="#" data-bind="click:back">Back</a>
            <button type="submit">Save</button>
        </fieldset>
    </form>
</section>


<section id="done" class="wizard">
    <h1>Wizard Complete</h1>
    <p>Thanks!</p>
</section>

CSS

.wizard { display: none; }
.wizard.active { display:block; }

JavaScript

$ui = {
    navigate: function (to) {
        var from = $('.active'), doc = $(document);
        if (typeof to === 'string') { to = $(to); }
        doc.trigger('navigating', { from: from, to: to });
        from.removeClass('active');
        to.addClass('active');
        document.location.hash = to.attr('id');
    }
};
$vms = {
    'step-1': function () { return new StepViewModel({ id: 'step-1', next: '#step-2', name: ko.observable() }); },
    'step-2': function () { return new StepViewModel({ id: 'step-2', previous: '#step-1', next: '#done', email: ko.observable() }); },
    'done': function () { return new StepViewModel({ id: 'done', previous: '#step-2', email: ko.observable() }); }
};
    
$(document).on('navigating', function(e, ui) {
    if (!ko.dataFor(to[0])) {
        ko.applyBindings($vms[ui.to.attr('id')](), ui.to[0]);
    }
});
function StepViewModel (data) {
    this.isVisible = ko.observable(false);
    
    this.submit = function () {
        $ui.navigate(data.next);
    };
    this.back = function () {
        $ui.navigate(data.previous);
    };
    $.extend(this, data);
    return this;
};
$(function () { $ui.navigate('#step-1'); });