Views

One of the hardest things with a pushstate navigation is to handle and take care of all the Javascript states/events in the different pages.

Barba.js gives a nice helper that will help you to associate a Container with a View.

All the transitions need to extend the Barba.BaseView object.

To associate a View with a Container, it's enough to specify a common namespace:

<div class="barba-container" data-namespace="homepage">

var Homepage = Barba.BaseView.extend({
                    namespace: 'homepage',
                    onEnter: function() {
                    // The new Container is ready and attached to the DOM.
                    },
                    onEnterCompleted: function() {
                    // The Transition has just finished.
                    },
                    onLeave: function() {
                    // A new Transition toward a new page has just started.
                    },
                    onLeaveCompleted: function() {
                    // The Container has just been removed from the DOM.
                    }
});
// Don't forget to init the view!
Homepage.init();

It's suggested to .init() the Views before calling Pjax.start() - In this way Pjax.start() will emit onEnter() and onEnterCompleted() for the current view.

If you don't like data-namespace you can change it, see the Dom API section.