Ruby on Rails
ターボリンク
サーチ…
前書き
Turbolinksは、Webアプリケーションをより速くナビゲートするためのJavaScriptライブラリです。リンクをたどると、Turbolinksは自動的にページを取得し、<body>でスワップし、<head>をマージします。
備考
レール開発者は、開発中にターボリンクを最小限に抑えることができます。しかし、これは、見つけにくいバグの原因となる可能性があるため、よく知っておくべき重要な図書館です。
主な取り組み:
-
turbolinks:load
document.ready
イベントの代わりにturbolinks:load
イベントにバインドする -
data-turbolinks-false
属性を使用して、リンクごとにターボリンク機能を無効にします。 -
data-turbolinks-permanent
属性を使用して、ページ読み込み全体の要素を保持し、キャッシュ関連のバグを回避します。
ターボリンクの詳細については、 github公式リポジトリをご覧ください。
このドキュメンテーションの多くは、githubリポジトリのturbolinkのドキュメントを作成してくれた人たちの功績によるものです。
ターボリンクのページロードの概念へのバインディング
ターボリンクでは、以下を使用する従来のアプローチ:
$(document).ready(function() {
// awesome code
});
動作しません。ターボリンクを使用している間、 $(document).ready()
イベントは最初のページの読み込み時に1回だけ発生します。その時点から、ユーザーがあなたのウェブサイトのリンクをクリックするたびに、ターボリンクがリンククリックイベントを傍受し、<body>タグを置き換えて<head>タグをマージするようにajaxリクエストを行います。プロセス全体が、ターボリンクの土地の「訪問」の概念を引き起こします。したがって、上記の従来のdocument.ready()
構文を使用する代わりに、turbolinkの訪問イベントにバインドする必要があります。
// pure js
document.addEventListener("turbolinks:load", function() {
// awesome code
});
// jQuery
$(document).on('turbolinks:load', function() {
// your code
});
特定のリンクでターボリンクを無効にする
特定のリンクでターボリンクを無効にすることは非常に簡単です。 公式のturbolinksの文書によると:
ターボリンクは、linkまたはその祖先のいずれかにdata-turbolinks = "false"と注釈を付けることによって、リンクごとに無効にすることができます。
例:
// disables turbolinks for this one link
<a href="/" data-turbolinks="false">Disabled</a>
// disables turbolinks for all links nested within the div tag
<div data-turbolinks="false">
<a href="/">I'm disabled</a>
<a href="/">I'm also disabled</a>
</div>
// re-enable specific link when ancestor has disabled turbolinks
<div data-turbolinks="false">
<a href="/">I'm disabled</a>
<a href="/" data-turbolinks="true">I'm re-enabled</a>
</div>
アプリケーション訪問の理解
アプリケーションの訪問は、ターボリンク対応のリンクをクリックするか、
Turbolinks.visit(location)
デフォルトでは、訪問関数は 'advance'アクションを使用します。もっとわかりやすいことに、訪問機能のデフォルトの動作は、「場所」パラメータによって示されるページに進むことです。ページが訪問されるたびに、turbolinkはhistory.pushState
を使用してブラウザの履歴に新しいエントリをプッシュします。ターボリンクは履歴を使用して可能な限りキャッシュからページを読み込もうとするため、履歴は重要です。これにより、頻繁に訪れるページのページレンダリングが非常に高速になります。
ただし、ヒストリをスタックにプッシュしないで場所を訪れる場合は、次のようにvisit関数で 'replace'アクションを使用できます。
// using links
<a href="/edit" data-turbolinks-action="replace">Edit</a>
// programatically
Turbolinks.visit("/edit", { action: "replace" })
これにより、ヒストリスタックの先頭が新しいページに置き換えられ、スタック上のアイテムの総数は変更されません。
また、ユーザーがブラウザの「進む」ボタンまたは「戻る」ボタンをクリックした結果として発生する復旧リストを支援する「復旧」アクションもあります。 Turbolinksでは、これらのタイプのイベントを内部的に処理し、ユーザーが手動でデフォルトの動作を改ざんすることを推奨しています。
開始前に訪問をキャンセルする
Turbolinksは、訪問の発生を止めるために使用できるイベントリスナーを提供します。 turbolinks:before-visit
イベントを聞いて、 turbolinks:before-visit
に通知されます。
イベントハンドラでは、次のものを使用できます。
// pure javascript
event.data.url
または
// jQuery
$event.originalEvent.data.url
訪問の場所を取得する。訪問は、次の電話で取り消すことができます。
event.preventDefault()
注意:
復旧訪問は取り消すことができず、ターボリンクを発砲しない:訪問前。
ページの読み込み中の要素の永続化
次のような状況を考えてみましょう。ユーザーがソーシャルメディアのWebサイトの開発者であり、ユーザーが他のユーザーと友だちになり、ターボリンクを使用してページの読み込みを高速化するとします。サイトの各ページの右上には、ユーザーが現在持っている友人の総数を示す数字があります。あなたのサイトを使用していると3人の友人がいるとします。新しい友達が追加されるたびに、友人カウンターを更新するjavascriptがいくつかあります。あなたがちょうど新しい友人を追加したことを想像して、あなたのjavascriptが正常に動作し、ページの右上に友人の数が更新されたことを想像してみましょう。4.次に、ブラウザの戻るボタンをクリックしたとします。ページが読み込まれると、友達が4人いるのに友達カウンターに3と表示されます。
これは比較的一般的な問題であり、ターボリンクが解決策を提供している問題です。この問題が発生する理由は、ユーザーが戻るボタンをクリックするとターボリンクが自動的にキャッシュからページを読み込むためです。キャッシュされたページは常にデータベースで更新されるとは限りません。
この問題を解決するには、友人カウントをidの "friend-count"の<div>タグの中にレンダリングするとします。
<div id="friend-count" data-turbolinks-permanent>3 friends</div>
data-turbolinks-permanent
属性を追加することで、ターボリンクに特定の要素をページ読み込み全体に保持するように指示します。 公式の文書は言う :
恒久的な要素を指定するには、HTML IDを与え、データターボリンクを永続的に注釈を付けます。各レンダリングの前に、Turbolinksは永続的なすべての要素をidでマッチングし、元のページから新しいページにそれらを転送し、データとイベントリスナーを保持します。