View

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


結果:

HTML

1.html
<div id="barba-wrapper">
  <div class="barba-container">
    <p>ページ1</p>
    <p><a href="./2.html">ページ2を表示</a></p>
  </div>
</div>
2.html
<div id="barba-wrapper">
  <div class="barba-container">
    <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();