TEST_CODEOWNERS/rails
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Revise Turbo-related info in Getting Started guide [ci-skip]

Browse Source 
This revises a few recent additions related to Turbo.
This commit is contained in:
Jonathan Hefner 2022-01-02 13:42:57 -06:00
parent 3a2e361457
commit d99befacc1
1 changed files with 41 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
guides/source/getting_started.md
View File

@ -825,7 +825,7 @@ The `create` action instantiates a new article with values for the title and
body, and attempts to save it. If the article is saved successfully, the action body, and attempts to save it. If the article is saved successfully, the action
redirects the browser to the article's page at `"http://localhost:3000/articles/#{@article.id}"`. redirects the browser to the article's page at `"http://localhost:3000/articles/#{@article.id}"`.
Else, the action redisplays the form by rendering `app/views/articles/new.html.erb` Else, the action redisplays the form by rendering `app/views/articles/new.html.erb`
with a status code 4XX for the app to work fine with [Turbo](https://github.com/hotwired/turbo-rails). with status code [422 Unprocessable Entity](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/422).
The title and body here are dummy values. After we create the form, we will come The title and body here are dummy values. After we create the form, we will come
back and change these. back and change these.
@ -1041,8 +1041,8 @@ messages.
When we submit the form, the `POST /articles` request is mapped to the `create` When we submit the form, the `POST /articles` request is mapped to the `create`
action. The `create` action *does* attempt to save `@article`. Therefore, action. The `create` action *does* attempt to save `@article`. Therefore,
validations *are* checked. If any validation fails, `@article` will not be validations *are* checked. If any validation fails, `@article` will not be
saved, `app/views/articles/new.html.erb` will be rendered with error saved, and `app/views/articles/new.html.erb` will be rendered with error
messages with a status code 4XX for the app to work fine with [Turbo](https://github.com/hotwired/turbo-rails). messages.
TIP: To learn more about validations, see [Active Record Validations]( TIP: To learn more about validations, see [Active Record Validations](
active_record_validations.html). To learn more about validation error messages, active_record_validations.html). To learn more about validation error messages,
@ -1136,9 +1136,8 @@ action will render `app/views/articles/edit.html.erb`.
The `update` action (re-)fetches the article from the database, and attempts The `update` action (re-)fetches the article from the database, and attempts
to update it with the submitted form data filtered by `article_params`. If no to update it with the submitted form data filtered by `article_params`. If no
validations fail and the update is successful, the action redirects the browser validations fail and the update is successful, the action redirects the browser
to the article's page. Else, the action redisplays the form with error to the article's page. Else, the action redisplays the form — with error
messages, by rendering `app/views/articles/edit.html.erb` with a status code 4XX messages — by rendering `app/views/articles/edit.html.erb`.
for the app to work fine with [Turbo](https://github.com/hotwired/turbo-rails).
#### Using Partials to Share View Code #### Using Partials to Share View Code
@ -1274,7 +1273,7 @@ class ArticlesController < ApplicationController
@article = Article.find(params[:id]) @article = Article.find(params[:id])
@article.destroy @article.destroy
redirect_to root_path, status: 303 redirect_to root_path, status: :see_other
end end
private private
@ -1286,12 +1285,12 @@ end
The `destroy` action fetches the article from the database, and calls [`destroy`]( The `destroy` action fetches the article from the database, and calls [`destroy`](
https://api.rubyonrails.org/classes/ActiveRecord/Persistence.html#method-i-destroy) https://api.rubyonrails.org/classes/ActiveRecord/Persistence.html#method-i-destroy)
on it. Then, it redirects the browser to the root path. on it. Then, it redirects the browser to the root path with status code
[303 See Other](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/303).
We have chosen to redirect to the root path because that is our main access We have chosen to redirect to the root path because that is our main access
point for articles. But, in other circumstances, you might choose to redirect to point for articles. But, in other circumstances, you might choose to redirect to
e.g. `articles_path`. Additionally we return an `303` status code, which lets the e.g. `articles_path`.
browser know, the deletion worked.
Now let's add a link at the bottom of `app/views/articles/show.html.erb` so that Now let's add a link at the bottom of `app/views/articles/show.html.erb` so that
we can delete an article from its own page: we can delete an article from its own page:
@ -1303,21 +1302,21 @@ we can delete an article from its own page:
<ul> <ul>
<li><%= link_to "Edit", edit_article_path(@article) %></li> <li><%= link_to "Edit", edit_article_path(@article) %></li>
<li><%= link_to "Destroy", article_path(@article), <li><%= link_to "Destroy", article_path(@article), data: {
data: { turbo_method: :delete, turbo_confirm: "Are you sure?" } %></li> turbo_method: :delete,
turbo_confirm: "Are you sure?"
} %></li>
</ul> </ul>
``` ```
In the above code, we're passing the `data` attribute with some options to `link_to`. In the above code, we use the `data` option to set the `data-turbo-method` and
The `turbo_method: :delete` option causes the link to make a `DELETE` request instead `data-turbo-confirm` HTML attributes of the "Destroy" link. Both of these
of a `GET` request. The `turbo_confirm: { confirm: "Are you sure?" }` option causes a attributes hook into [Turbo](https://turbo.hotwired.dev/), which is included by
confirmation dialog to appear when the link is clicked. If the user cancels the default in fresh Rails applications. `data-turbo-method="delete"` will cause the
dialog, the request is aborted. Both of these options are powered by [Turbo](https://turbo.hotwired.dev/) link to make a `DELETE` request instead of a `GET` request.
called *Performing Visits*. The JavaScript file that `data-turbo-confirm="Are you sure?"` will cause a confirmation dialog to appear
implements these behaviors is included by default in fresh Rails applications. when the link is clicked. If the user cancels the dialog, the request will be
aborted.
TIP: To learn more about Unobtrusive JavaScript, see [Working With JavaScript in
Rails](working_with_javascript_in_rails.html).
And that's it! We can now list, show, create, update, and delete articles! And that's it! We can now list, show, create, update, and delete articles!
InCRUDable! InCRUDable!
@ -1496,8 +1495,10 @@ So first, we'll wire up the Article show template
<ul> <ul>
<li><%= link_to "Edit", edit_article_path(@article) %></li> <li><%= link_to "Edit", edit_article_path(@article) %></li>
<li><%= link_to "Destroy", article_path(@article), <li><%= link_to "Destroy", article_path(@article), data: {
data: { turbo_method: :delete, turbo_confirm: "Are you sure?" } %></li> turbo_method: :delete,
turbo_confirm: "Are you sure?"
} %></li>
</ul> </ul>
<h2>Add a comment:</h2> <h2>Add a comment:</h2>
@ -1561,8 +1562,10 @@ add that to the `app/views/articles/show.html.erb`.
<ul> <ul>
<li><%= link_to "Edit", edit_article_path(@article) %></li> <li><%= link_to "Edit", edit_article_path(@article) %></li>
<li><%= link_to "Destroy", article_path(@article), <li><%= link_to "Destroy", article_path(@article), data: {
data: { turbo_method: :delete, turbo_confirm: "Are you sure?" } %></li> turbo_method: :delete,
turbo_confirm: "Are you sure?"
} %></li>
</ul> </ul>
<h2>Comments</h2> <h2>Comments</h2>
@ -1634,8 +1637,10 @@ following:
<ul> <ul>
<li><%= link_to "Edit", edit_article_path(@article) %></li> <li><%= link_to "Edit", edit_article_path(@article) %></li>
<li><%= link_to "Destroy", article_path(@article), <li><%= link_to "Destroy", article_path(@article), data: {
data: { turbo_method: :delete, turbo_confirm: "Are you sure?" } %></li> turbo_method: :delete,
turbo_confirm: "Are you sure?"
} %></li>
</ul> </ul>
<h2>Comments</h2> <h2>Comments</h2>
@ -1693,8 +1698,10 @@ Then you make the `app/views/articles/show.html.erb` look like the following:
<ul> <ul>
<li><%= link_to "Edit", edit_article_path(@article) %></li> <li><%= link_to "Edit", edit_article_path(@article) %></li>
<li><%= link_to "Destroy", article_path(@article), <li><%= link_to "Destroy", article_path(@article), data: {
data: { turbo_method: :delete, turbo_confirm: "Are you sure?" } %></li> turbo_method: :delete,
turbo_confirm: "Are you sure?"
} %></li>
</ul> </ul>
<h2>Comments</h2> <h2>Comments</h2>
@ -1970,8 +1977,10 @@ So first, let's add the delete link in the
</p> </p>
<p> <p>
<%= link_to 'Destroy Comment', [comment.article, comment], <%= link_to "Destroy Comment", [comment.article, comment], data: {
data: { turbo_method: :delete, turbo_confirm: "Are you sure?" } %> turbo_method: :delete,
turbo_confirm: "Are you sure?"
} %>
</p> </p>
``` ```