Turbo ドライブ
# Turbo.visit
Turbo.visit(location)
Turbo.visit(location, { action: action })
Turbo.visit(location, { frame: frame })指定された location（URLまたはパスを含む文字列）に対して、指定された action（"advance" または "replace" のいずれかの文字列）でアプリケーション・アクセスを行います。
location がクロスオリジンなURL、または指定されたルートの範囲外にある場合（ルートロケーションの設定を参照）、Turbo は、window.location を利用し画面全体の再読み込みを行います。
action が指定されていない場合、Turbo ドライブは、"advance"が指定されたとみなします。
画面遷移が実行される前に、Turboドライブは document に対して turbo:before-visit イベントを発火します。アプリケーション側では、このイベントを検知し、event.preventDefault() を利用して画面遷移をキャンセルできます。（アクセスを開始前にキャンセルするを参照）。」
frame が指定されている場合、指定された値と一致する [id] 属性を持つ <turbo-frame> 要素を、指定された location へナビゲートします。<turbo-frame> 要素が見つからない場合は、画面全体でのアプリケーション・アクセスを行います。
原文
Drive
# Turbo.visit
Performs an Application Visit to the given location (a string containing a URL or path) with the specified action (a string, either "advance" or "replace").
If location is a cross-origin URL, or falls outside of the specified root (see Setting a Root Location), Turbo performs a full page load by setting window.location.
If action is unspecified, Turbo Drive assumes a value of "advance".
Before performing the visit, Turbo Drive fires a turbo:before-visit event on document. Your application can listen for this event and cancel the visit with event.preventDefault() (see Canceling Visits Before They Start).
If frame is specified, find a <turbo-frame> element with an [id] attribute that matches the provided value, and navigate it to the provided location. If the <turbo-frame> cannot be found, perform a page-level Application Visit.
# Turbo.cache.clear
Turbo.cache.clear()Turbo ドライブによってキャッシュされたページ情報を全て削除します。サーバー上の状態が変更され、キャッシュされたページに影響を与える可能性がある場合は、この Turbo.cache.clear() を呼んでください。
注記: この機能は以前 Turbo.clearCache() として公開されていましたが、トップレベルで非推奨となり、代わりに新しい Turbo.cache.clear() の利用が推奨されています。
原文
# Turbo.cache.clear
Removes all entries from the Turbo Drive page cache. Call this when state has changed on the server that may affect cached pages.
Note: This function was previously exposed as Turbo.clearCache(). The top-level function was deprecated in favor of the new Turbo.cache.clear() function.
# Turbo.config.drive.progressBarDelay
Turbo.config.drive.progressBarDelay = delayInMillisecondsナビゲーション中にプログレスバーが表示されるまでの遅延をミリ秒単位で設定できます。デフォルトでは、プログレスバーは500ミリ秒後に表示されます。
iOS または Android アダプターと併用した場合、このメソッドは動作しないので注意しましょう。
注: この関数は以前は Turbo.setProgressBarDelay 関数として公開されていました。トップレベルの関数は非推奨となり、代わりに新しい Turbo.config.drive.progressBarDelay = delayInMilliseconds 構文が推奨されるようになりました。
原文
# Turbo.config.drive.progressBarDelay
Turbo.config.drive.progressBarDelay = delayInMillisecondsSets the delay after which the progress bar will appear during navigation, in milliseconds. The progress bar appears after 500ms by default.
Note that this method has no effect when used with the iOS or Android adapters.
Note: This function was previously exposed as Turbo.setProgressBarDelay function. The top-level function was deprecated in favor of the new Turbo.config.drive.progressBarDelay = delayInMilliseconds syntax.
# Turbo.config.forms.confirm
Turbo.config.forms.confirm = confirmMethoddata-turbo-confirm を指定したリンクによって呼び出されるメソッドを設定できます。デフォルトは、ブラウザの組み込みの confirm が設定されています。ここで設定したメソッドは、画面遷移を行うかによって true または talse を返す Promise オブジェクトを返す必要があります。
注: この関数は以前は Turbo.setConfirmMethod 関数として公開されていました。トップレベルの関数は非推奨となり、代わりに新しい Turbo.config.forms.confirm = confirmMethod 構文が推奨されるようになりました。
原文
# Turbo.config.forms.confirm
Turbo.config.forms.confirm = confirmMethodSets the method that is called by links decorated with data-turbo-confirm. The default is the browser’s built in confirm. The method should return a Promise object that resolves to true or false, depending on whether the visit should proceed.
+Note: This function was previously exposed as Turbo.setConfirmMethod function. The top-level function was deprecated in favor of the new Turbo.config.forms.confirm = confirmMethod syntax.
# Turbo.session.drive
Turbo.session.drive = falseデフォルトで Turbo ドライブをオフに設定できます。また、Turbo ドライブを部分的に利用したい場合は、data-turbo="true" を設定することで、リンクやフォームごとに Turbo ドライブをオプトインできます。
原文
# Turbo.session.drive
Turns Turbo Drive off by default. You must now opt-in to Turbo Drive on a per-link and per-form basis using data-turbo="true".
# FetchRequest
Turbo は HTTP リクエストの実行中に、さまざまなイベントを発火します。
これらのイベントでは、次のプロパティを持つ FetchRequest オブジェクトを参照します。
| Property | Type | Description |
|---|---|---|
body |
FormData | URLSearchParams | "get" リクエストの場合は URLSearchParams インスタンス、それ以外の場合は FormData |
enctype |
"application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" |
HTMLFormElement.enctype の値 |
fetchOptions |
RequestInit | リクエストの設定オプション |
headers |
Headers | { [string]: [any] } |
リクエストのHTTPヘッダー |
method |
"get" | "post" | "put" | "patch" | "delete" |
the HTTP verb |
params |
URLSearchParams | "get" リクエストの URLSearchParams インスタンス |
target |
HTMLFormElement | HTMLAnchorElement | FrameElement | null |
リクエストを開始した要素 |
url |
URL | リクエストの URL |
原文
# FetchRequest
Turbo dispatches a variety of events while making HTTP requests that reference FetchRequest objects with the following properties:
| Property | Type | Description |
|---|---|---|
body |
FormData | URLSearchParams | a URLSearchParams instance for "get" requests, FormData otherwise |
enctype |
"application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" |
the HTMLFormElement.enctype value |
fetchOptions |
RequestInit | the request’s configuration options |
headers |
Headers | { [string]: [any] } |
the request’s HTTP headers |
method |
"get" | "post" | "put" | "patch" | "delete" |
the HTTP verb |
params |
URLSearchParams | the URLSearchParams instance for "get" requests |
target |
HTMLFormElement | HTMLAnchorElement | FrameElement | null |
the element responsible for initiating the request |
url |
URL | the request’s URL |
# FetchResponse
Turbo は HTTP リクエストの実行中に、さまざまなイベントを発火します。
これらのイベントでは、次のプロパティを持つ FetchResponse オブジェクトを参照します。
| Property | Type | Description |
|---|---|---|
clientError |
boolean |
ステータスが 400 から 499 の間であれば true、それ以外であれば false |
contentType |
string | null |
Content-Type ヘッダーの値 |
failed |
boolean |
レスポンスが成功していない場合は true、それ以外であれば false |
isHTML |
boolean |
コンテンツタイプが HTML であれば true、それ以外であれば false |
location |
URL | Response.url の値 |
redirected |
boolean |
Response.redirected の値 |
responseHTML |
Promise<string> |
HTMLの場合は Response を複製し、 Response.text() を呼び出す |
responseText |
Promise<string> |
Responseを複製し、 Response.text() を呼び出す |
response |
Response | Response インスタンス |
serverError |
boolean |
ステータスが 500 から 599 の間の場合は true、それ以外であれば false |
statusCode |
number |
Response.status の値 |
succeeded |
boolean |
Response.ok の場合は true、それ以外であれば false |
原文
Turbo dispatches a variety of events while making HTTP requests that reference FetchResponse objects with the following properties:
| Property | Type | Description |
|---|---|---|
clientError |
boolean |
true if the status is between 400 and 499, false otherwise |
contentType |
string | null |
the value of the Content-Type header |
failed |
boolean |
true if the response did not succeed, false otherwise |
isHTML |
boolean |
true if the content type is HTML, false otherwise |
location |
URL | the value of Response.url |
redirected |
boolean |
the value of Response.redirected |
responseHTML |
Promise<string> |
clones the Response if its HTML, then calls Response.text() |
responseText |
Promise<string> |
clones the Response, then calls Response.text() |
response |
Response | the Response instance |
serverError |
boolean |
true if the status is between 500 and 599, false otherwise |
statusCode |
number |
the value of Response.status |
succeeded |
boolean |
true if the Response.ok, false otherwise |
# FormSubmission
Turbo は HTTP リクエストの実行中に、さまざまなイベントを発火します。
これらのイベントでは、次のプロパティを持つ FormSubmission オブジェクトを参照します。
| Property | Type | Description |
|---|---|---|
action |
string |
<form> 要素が送信先とする場所 |
body |
FormData | URLSearchParams | 基盤となる Request のペイロード |
enctype |
"application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" |
HTMLFormElement.enctype |
fetchRequest |
FetchRequest | 基盤となる FetchRequest インスタンス |
formElement |
HTMLFormElement | 送信する <form> 要素 |
isSafe |
boolean |
method が "get" なら true、それ以外は false |
location |
URL | action 文字列を URL インスタンスに変換したもの |
method |
"get" | "post" | "put" | "patch" | "delete" |
HTTPメソッド |
submitter |
HTMLButtonElement | HTMLInputElement | undefined |
<form> 要素の送信を担当する要素 |
原文
# FormSubmission
Turbo dispatches a variety of events while submitting forms that reference FormSubmission objects with the following properties:
| Property | Type | Description |
|---|---|---|
action |
string |
where the <form> element is submitting to |
body |
FormData | URLSearchParams | the underlying Request payload |
enctype |
"application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" |
the HTMLFormElement.enctype |
fetchRequest |
FetchRequest | the underlying FetchRequest instance |
formElement |
HTMLFormElement | the <form> element to that is submitting |
isSafe |
boolean |
true if the method is "get", false otherwise |
location |
URL | the action string transformed into a URL instance |
method |
"get" | "post" | "put" | "patch" | "delete" |
the HTTP verb |
submitter |
HTMLButtonElement | HTMLInputElement | undefined |
the element responsible for submitting the <form> element |