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.