Skip to content

Commit

Permalink
Update turbo.md (#29117)
Browse files Browse the repository at this point in the history
  • Loading branch information
dwlknsn authored Nov 25, 2024
1 parent 9f96b80 commit c07bfa1
Showing 1 changed file with 13 additions and 5 deletions.
18 changes: 13 additions & 5 deletions ruby_on_rails/rails_sprinkles/turbo.md
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

0 comments on commit c07bfa1

Please sign in to comment.