Backbone Wizard

Backbone js Wizard

by secretgspot

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="https://raw.github.com/douglascrockford/JSON-js/master/json2.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://log4javascript.org/js/log4javascript_uncompressed.js"></script>
<script id="name-template">     
    <div class="wizard-view">
        <h1>Step # 1</h1> <br />
        <h3>What's your name?</h3>    
        <blockquote>Enter your full name.</blockquote>
        <input type="text" id="name" value="{{name}}">
    </div>
</script>

<script id="age-template" type="text/x-handlebars-template">    
    <div class="wizard-view">
        <h1>Step # 2</h1> <br />     
        <h3>How old are you?</h3>    
        <blockquote>Enter your age.</blockquote>
        <input type="text" id="age" value="{{age}}">
    </div>
</script>

<script id="city-template" type="text/x-handlebars-template">
    <div class="wizard-view">
        <h1>Step # 3</h1> <br />
        <h3>What city are you in?</h3>    
        <blockquote>Enter the city you are currently in.</blockquote>
        <input type="text" id="city" value="{{city}}">
    </div>
</script>

<script id="confirm-template" type="text/x-handlebars-template">
    <div class="wizard-view">
        <h1>Confirm</h1> <br />
        <p>
            <strong>Name: </strong>{{name}}<br />
            <strong>Age: </strong>{{age}}<br />
            <strong>City: </strong>{{city}}<br />
        </p>    
    </div>
</script>


<script id="wizard-template" type="text/x-handlebars-template">
    <!-- Wizard -->
        <div id="wizard">
        
            <!-- Tabs -->
                <ul id="wizard-view-tabs" class="nav nav-tabs"></ul>
            <!-- Tabs -->
            
    ...

CSS

.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
    background-color:#f5f5f5;
}

JavaScript

var log = log4javascript.getDefaultLogger();    
/*******************************************************************************************************/
/*******************************************************************************************************/
var Wizard = (function () {
    'use strict';

    var WizardViews = function () {

        var Node = function (view) {
            var _next = null; //reference next node
            var _previous = null; //reference previus node
            var _view = view.ref; //referce current view
            var _tab = view.tab;
            return {
                setPrevious: function (node) { _previous = node; return this; }, //chainable!
                getPrevious: function () { return _previous; },
                setNext: function (node) { _next = node; return this; }, //chainable!
                getNext: function () { return _next; },
                getView: function () { return _view; },
                getTab: function () { return _tab; }
            };
        };

        var _head = null;
        var _tail = null;
        var _current = null;
        
        return {
            first: function () { return _head; },
            last: function () { return _tail; },
            moveNext: function () {
                return (_current !== null) ? _current = _current.getNext() : null;
            }, //set current to next and return current or return null
            movePrevious: function () {
                return (_current !== null) ? _current = _current.getPrevious() : null;
            }, //set current to previous and return current or return null
            getCurrent: function () { return _current; },
            insertView: function (view) {
                if (_tail === null) { // list is empty (implied head is null)                    
                    _current = _tail = _head = new Node(view);
                }
                else {//list has nodes                    
                   ...