BackStack demo

This is simple demo of BackStack library in action.

by secretgspot

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://pwalczyszyn.github.com/backstack/scripts/libs/backstack/backstack-min.js"></script>
<div id="container"/>

JavaScript

/**
 * This is an implementation of a FirstView
 */
var FirstView = Backbone.View.extend({

    events: {
        'click #btnNext': 'btnNext_clickHandler'
    },

    render: function() {
        // Rendering view
        this.$el.html('<p>FirstView: Hello BackStack!</p><button id="btnNext">Next View</button>');
        return this;
    },

    btnNext_clickHandler: function(event) {
        // Pushing second view to the stack
        stackNavigator.pushView(SecondView);
    }
});

/**
 * This is an implementation of a SecondView
 */
var SecondView = Backbone.View.extend({

    events: {
        'click #btnPrev': 'btnPrev_clickHandler'
    },

    initialize:function() {
        this.on('viewActivate', this.this_viewActivateHandler, this);
    },
    
    render: function() {
        // Rendering view
        this.$el.html('<p>SecondView: This is a second view!</p><button id="btnPrev">Pop this View</button>');
        return this;
    },

    btnPrev_clickHandler: function(event) {
        // Popping SecondView from the stack with a fade effect
        var fade = new BackStack.FadeEffect();
        // You can pass different effects to all StackNavigator functions
        stackNavigator.popView(fade);

    },
    
    this_viewActivateHandler: function(event) {
        alert('SecondView activated!');
    }
});

// Initializing BackStack.StackNavigator for the #container div
var stackNavigator = new BackStack.StackNavigator({
    el: '#container'
});

// Pushing FirstView on to the stack
stackNavigator.pushView(FirstView);