Views

ビュー

pushstateの実装で最も難しいことの一つが、 JavaScriptのイベントや状態の管理です。

barba.jsはViewにContainerを紐付けるためのヘルパーがあります。

全てのトランジションはBarba.BaseViewオブジェクトを拡張する必要があります。

ViewとContainerを関連付けるには、 名前空間を指定するだけです。

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

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

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

Pjax.start()を呼び出す前に.init()を呼ぶことをお勧めします。 このようにして、Pjax.start()はViewにonEnter()とonEnterCompletedを送ります。

もしdata-namespaceを変更したい場合は、変更することができます。DomAPI参照してください。

[デモ - View]