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()

注意：

公式のturbolinks docsによると：

復旧訪問は取り消すことができず、ターボリンクを発砲しない：訪問前。

ページの読み込み中の要素の永続化

次のような状況を考えてみましょう。ユーザーがソーシャルメディアの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でマッチングし、元のページから新しいページにそれらを転送し、データとイベントリスナーを保持します。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

Ruby on Rails
ターボリンク

サーチ…

前書き

備考