views.html

---
# Front matter comment to ensure Jekyll properly reads file.
---

{% include header.html %}
{% include nav.html %}

<div id="barba-wrapper">
<div class="barba-container">

<h1>Views</h1>

<p>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.</p>

<p>Barba.js gives a nice helper, that will help you to associate a <code>Container</code> with a <code>View</code>.</p>

<p>All the transitions need to extend the <a href="https://github.com/luruke/barba.js/blob/master/src/View/BaseView.js" target="_blank">Barba.BaseView</a> object.</p>

<p>To associate a <code>View</code> with a <code>Container</code>, it's enough to specify a common namespace:</p>

{% highlight html %}
<div class="barba-container" data-namespace="homepage">
{% endhighlight %}

{% highlight javascript %}
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();
{% endhighlight %}

<blockquote>
  <p>Is suggested to .init() the Views before calling Pjax.start() - In this way Pjax.start() will emit onEnter() and onEnterCompleted() for the current view.</p>
</blockquote>

<blockquote>
  <p>If you don't like data-namespace you can change it, see the API section.</p>
</blockquote>

</div>
</div>

{% include footer.html %}