Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ruby on Rails: Update turbo.md #29117

Merged
merged 1 commit into from
Nov 25, 2024
Merged

Ruby on Rails: Update turbo.md #29117

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 13 additions & 5 deletions ruby_on_rails/rails_sprinkles/turbo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,17 +56,25 @@ A frame is designated by wrapping a region inside of a `<turbo-frame>` element.
A basic Turbo Frame, using Rails helpers, may look like so:

```erb
# with a block
<%= turbo_frame_tag "article" do %>
Some content
<% end %>

# without a block (typically this is used as a placeholder element to be filled later)
<%= turbo_frame_tag "article" %>
```

which will generate:

```html
# with a block
<turbo-frame id="article">
Some content
</turbo-frame>

# without a block
<turbo-frame id="article"></turbo-frame>
```

Note that the frames have an ID. The ID is how Turbo is able to identify a frame to find out which one is which.
Expand Down Expand Up @@ -130,7 +138,7 @@ We can also do the opposite. We can make a link that exists outside of our Turbo
<%= link_to "Show Posts", posts_path, data: { turbo_frame: "list-region" } %>
<%= link_to "Show Images", images_path, data: { turbo_frame: "list-region" } %>

<%= turbo_frame_tag id="list-region" %>
<%= turbo_frame_tag "list-region" %>
```

Clicking either of the above links will send a request to the respective path and return the content inside of our `"list-region"` frame.
Expand All @@ -143,7 +151,7 @@ For example:

```erb
...
<%= turbo_frame_tag id="Articles", src: articles_path do %>
<%= turbo_frame_tag "Articles", src: articles_path do %>
<div>
I am a placeholder! After the request to articles_path is finished,
I will be replaced with the content inside of that page's turbo frame
Expand All @@ -156,7 +164,7 @@ We can also make our frames **lazy loaded**. A lazy loaded frame will only fetch

```erb
...
<%= turbo_frame_tag id="Articles", src: articles_path, loading: "lazy" do %>
<%= turbo_frame_tag "Articles", src: articles_path, loading: "lazy" do %>
<div>
I am a placeholder! I will be replaced when a user scrolls down to see me on the page!
</div>
Expand Down Expand Up @@ -186,7 +194,7 @@ Our `index` view:
```erb
# views/posts/index.html.erb

<%= turbo_frame_tag id="new_post", src:new_post_path %>
<%= turbo_frame_tag "new_post", src: new_post_path %>
<div id="posts">
<%= render @posts %>
</div>
Expand All @@ -197,7 +205,7 @@ Our `new` page with it's form:
```erb
# views/posts/new.html.erb

<%= turbo_frame_tag id="new_post" do %>
<%= turbo_frame_tag "new_post" do %>
<%= form_with model: @post do |form| %>
<%= form.label :body %>
<%= form.text_area :body %>
Expand Down
Loading