diff --git a/turbo/reference/streams.md b/turbo/reference/streams.md index 44f04628..cb15caed 100644 --- a/turbo/reference/streams.md +++ b/turbo/reference/streams.md @@ -2,12 +2,12 @@ order: 3 title: Turbo ストリーム description: Turbo ストリームのリファレンス -commit: "e9e0628" +commit: "4f4c385" --- # Turbo ストリーム -## 7つのアクション +## 8つのアクション ### Append 追加する target の dom_id によって指定されたコンテナに template タグ内のコンテンツを追加します。 @@ -25,13 +25,21 @@ target の dom_id によって指定されたコンテナに template タグ内
原文 -## The seven actions +## The eight actions ### Append Appends the content within the template tag to the container designated by the target dom id. -If the template’s first element has an id that is already used by a direct child inside the container targeted by dom_id, it is replaced instead of appended. +```html + + + +``` + +If the template's first element has an id that is already used by a direct child inside the container targeted by dom_id, it is replaced instead of appended.
### Prepend 先頭に追加 @@ -55,7 +63,15 @@ target の dom_id によって指定されたコンテナに template タグ内 Prepends the content within the template tag to the container designated by the target dom id. -If the template’s first element has an id that is already used by a direct child inside the container targeted by dom_id, it is replaced instead of prepended. +```html + + + +``` + +If the template's first element has an id that is already used by a direct child inside the container targeted by dom_id, it is replaced instead of prepended. ### Replace 置き換える @@ -70,12 +86,40 @@ target の dom_id で指定された要素を置き換えます。 ``` +`turbo-stream`要素に`[method="morph"]`属性を追加することで、ターゲットとなる dom_id で指定された要素をmorph経由で置き換えられます。 + +```html + + + +``` +
原文 -### Replace +### Replace Replaces the element designated by the target dom id. + +```html + + + +``` + +The `[method="morph"]` attribute can be added to the `turbo-stream` element to replace the element designated by the target dom id via morph. + +```html + + + +```
### Update 更新する @@ -90,12 +134,40 @@ target の dom_id で指定されたコンテナを template タグ内のコン ``` +`turbo-stream`要素に`[method="morph"]`属性を追加することで、ターゲットとなる dom_id で指定された要素の子要素のみを変形させられます。 + +```html + + + +``` +
原文 ### Update Updates the content within the template tag to the container designated by the target dom id. + +```html + + + +``` + +The `[method="morph"]` attribute can be added to the `turbo-stream` element to morph only the children of the element designated by the target dom id. + +```html + + + +```
### Remove 取り除く @@ -113,6 +185,11 @@ target の dom_id で指定された要素を取り除く。 ### Remove Removes the element designated by the target dom id. + +```html + + +``` ### Before 要素の前に挿入 @@ -133,6 +210,14 @@ target の dom_id で指定された要素の前に、 template タグ内のコ ### Before Inserts the content within the template tag before the element designated by the target dom id. + +```html + + + +``` ### After 要素の前に挿入 @@ -153,6 +238,49 @@ target の dom_id で指定された要素の後に template タグ内のコン ### After Inserts the content within the template tag after the element designated by the target dom id. + +```html + + + +``` + + +### Refresh リフレッシュ + +新しいコンテンツをレンダリングするために [ページリフレッシュ](/turbo/handbook/page_refreshes/) を始めます。 + +```html + + + + + + + + +``` + +
+原文 + +### Refresh + +Initiates a [Page Refresh](https://turbo.hotwired.dev/handbook/page_refreshes) to render new content. + +```html + + + + + + + + +``` +
## 複数の要素に対してアクションを行う @@ -176,6 +304,17 @@ Inserts the content within the template tag after the element designated by the ## Targeting Multiple Elements To target multiple elements with a single action, use the targets attribute with a CSS query selector instead of the target attribute. + +```html + + + + + + +``` ## Stream要素を処理する @@ -194,3 +333,21 @@ Turbo can connect to any form of stream to receive and process stream actions. A A good way to wrap all this together is by using a custom element, like turbo-rails does with TurboCableStreamSourceElement. +## HTML内のストリーム要素 + +Turbo ストリームは [カスタムHTML要素](https://developer.mozilla.org/ja/docs/Web/API/Web_components/Using_custom_elements)として実装されています。 +この要素は、要素がページの DOM に接続されたときにブラウザが呼び出す `connectedCallback` 関数の一部として解釈されます。 + +つまり、DOM にレンダリングされたストリーム要素はすべて解釈されるということです。 解釈された後、Turbo は要素を DOM から削除します。具体的には、ページやフレームのコンテンツ HTML 内でストリームアクションをレンダリングすると、それらが実行されるということです。これを利用して、メインコンテンツの読み込みとは別に追加の副作用を実行できます。 + +
+原文 + +## Stream Elements inside HTML + +Turbo streams are implemented as [a custom HTML element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements). +The element is interpreted as part of the `connectedCallback` function that the browser calls when the element is connected to the page dom. + +This means that any stream elements that are rendered into the dom will be interpreted. After being interpreted, Turbo will remove the element from the dom. More specifically, it means that rendering stream actions inside the page or frame content HTML will cause them to be executed. This can be used to execute additional sideffects beside the main content loading. + +