jquery.template.js

(function($) {

    var cache = {};

    function _render(elt, template, data, callback) {
        var data = data || {},
            callback = callback || function() {},
            html = template(data);

        elt.append(html);
        callback();
    }


    /**
     * Fetches the Underscore.js template at the given path,
     * processes it with the provided data object, and appends the
     * resulting html to the matched DOM elements.
     *
     * Templates will only be fetched once from the server,
     * preprocessed template are cached in the DOM.
     */
    $.fn.template = function(path, obj, callback) {
        var self = this;

        if (cache[path]) {
            _render(self, cache[path], obj, callback);
            return self;
        }

        $.get(path, function(data) {
            cache[path] = _.template(data);
            _render(self, cache[path], obj, callback);
        });

        return self;
    };


})(jQuery);

router.js

/*global Backbone */
var app = app || {};

(function() {
  'use strict';

  // Todo Router
  // ----------
  var Workspace = Backbone.Router.extend({

    // when a route is passed to the url,
    // we call the steStep function, which other
    // elements listen for and change accordingly
    routes: {
      'retrieve(/:connection)': 'retrieveConnection',
      'share(/:connection)': 'shareConnection',
      'access(/:state)': 'setResult',
      '*intro': 'setIntro' //default
    },
    setIntro: function() {
      app.pubsub.step = 'intro';
      console.log('router: intro');
      app.pubsub.trigger('intro');
    },
    retrieveConnection: function(connection) {
      app.pubsub.step = 1;
      var step = 1;
      console.log('router: step ' + step + ', connection: ' + connection);
      app.pubsub.trigger('step', step);
    },
    shareConnection: function(connection) {
      var step = 2;
      app.pubsub.step = 2;
      console.log('router: step ' + step + ' - ' + connection);
      app.pubsub.trigger('step', step, connection);
    },
    setResult: function(state) {
      var step = 3;
      app.pubsub.step = 3;
      console.log('router: result - ' + state);
      app.pubsub.trigger('step', step);
      app.pubsub.trigger('result', state);
    }

  });
  // add the router object to let it listen for changes to the url params
  app.Router = new Workspace();

  // Let backbone pick up control of the route

  Backbone.history.start({ pushstate: true, root: '#'} );
})();

step-template.html

<ul class="wizard-steps">

  <li class="<%- step == 1 ? "current" : "" %>">
    <span class="count">1</span>
    <p>Do something</p>
  </li>

  <li class="<%- step == 2 ? "current" : "" %>">
    <span class="count">2</span>
    <p>do the next thing</p>
  </li>

  <li class="<%- step == 3 ? "current" : "" %>">
    <span class="count">3</span>
    <p>Do the last thing</p>
  </li>

stepView.js

/*global Backbone, jQuery, _*/
/*jshint indent:2 */
var app = app || {};

(function($) {
  'use strict';
  // Step View
  // This shows the step we're on based on what is triggered
  // by router.js
  // --------------

  // The DOM element for a todo item...
  app.stepView = Backbone.View.extend({

    initialize: function() {

      // default step
      // this.step = 1;

      app.pubsub.on('step', function(step) {
        console.log('step change');
        console.log(this);
        console.log(step)
        this.step = step;
        this.render();
      }, this);
    },
    render: function() {

      var payload = { step: this.step };

      // fetch a template from a given path
      this.$el.empty().template('path/to/step-template.html', payload);
      // return this to allow us to call methods on it in other views
      return this;
    }


  });


})(jQuery);