View

リンクをクリックすると、 各イベントを呼び出される順番に表示します。

HTML

1.html

<div id="barba-wrapper">
  <div class="barba-container" data-namespace="homepage">
    <p>ページ1</p>
    <p>
      <a href="./2.html">ページ2を表示</a>
    </p>
  </div>
</div>

2.html

<div id="barba-wrapper">
  <div class="barba-container" data-namespace="homepage">
    <p>ページ2</p>
    <p>
      <a href="./1.html">ページ1を表示</a>
    </p>
  </div>
</div>

結果ブロック

<div><span>結果：</span><span id="result"></span></div>

JavaScript

Barba.Pjax.start();
var Homepage = Barba.BaseView.extend({
  namespace: 'homepage',
  onEnter: function() {
    // 新しいコンテナは準備が出来たタイミング。DOMに含まれています。
    div = document.createElement('div');
    div.textContent = 'onEnter : homepage';
    document.getElementById('result').appendChild(div);
  },
  onEnterCompleted: function() {
    // ページ遷移が終了したタイミング。
    div = document.createElement('div');
    div.textContent = 'onEnterComplete: homepage';
    document.getElementById('result').appendChild(div);
  },
  onLeave: function() {
    // 新しいページへの遷移が開始されたタイミング。
    div = document.createElement('div');
    div.textContent = 'onLeave: homepage';
    document.getElementById('result').appendChild(div);
  },
  onLeaveCompleted: function() {
    // コンテナがDOMから削除されたタイミング。
    div = document.createElement('div');
    div.textContent = 'onLeaveCompleted: homepage';
    document.getElementById('result').appendChild(div);
  }
});

// viewの初期化を忘れないで！
Homepage.init();