Barba - にほんご。

Views

ビュー

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

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

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

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

<div class="barba-container" data-namespace="homepage">
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]


© 2016 Luigi De Rosa Released under the MIT license

このコンテンツはLuigi De Rosa(luruke)によるBarbaドキュメントを翻訳/改変したものです。