0
0

Turbo Streamの主なアクション

Posted at

初めに

疑問に思ったことや上手くいかなかったことのアウトプットをしています。
自分なりの理解でアウトプットしていきます。初学者なので誤りもあると思います。
その際はご指摘いただけると幸いです。

Turbo Streamとは

HTMLの断片をリアルタイムで更新するツール。
Java Scriptの動的な更新を知識が無くとも可能にする。

代表的なアクション

・append
・prepend
・replace
・update
・remove
・before
・after

<%= turbo_stream.prepend "(IDの名称)" do %>
  <%= render @xxxxxx %>
<% end %> 

指定した要素をアクションに従って指定したIDを持つ要素の内部に反映する。

Append

新しい要素を既存のコンテンツの後に追加

Prepend

新しい要素を既存のコンテンツの後に追加

Replace

既存の要素を新しい内容で置き換える

Update

既存の要素の内容を部分的に更新する際に使用する。
※いいね数等

Remove

不要になった要素をDOMから取り除く

Before

特定の要素の前に新しい要素を追加する。

After

特定の要素の後に新しい要素を追加する

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0