いわりょのBlog

IT関連で学んだことを書いていきます。

rails link_toメソッドの使い方をまとめる 応用あり

link_toメソッドは、HTMLのaタグにです。
いろんな使い方を見てきたのでメモ。

指定したリンクへ移動するための、テキストを表示させる

第一引数は表示させるテキスト、第二引数はリンクを書きます。

<%= link_to “詳細をみる”, “http://www.example.co.jp/products” %>

「詳細をみる」というテキストが表示され、指定したURLで移動します。

パスの指定も可能

<%= link_to “Topページへ”, “root_path” %>

methodオプションや属性を指定する

【methodオプションを指定する例】

httpの種類を指定できます。デフォルトはgetです。

<%= link_to “削除”, user_path(params[:id]), method: :delete %>

method:を:deleteとすれば、削除のアクションを実行できるというわけです。

【属性を指定する例】<%= link_to “Topページへ”, root_path, class: “nav-menu” %>

これは、aタグの

<a href=”/” class=”nav-menu”>

のようなタグになります。

link_to doでブロックを囲む

f:id:Ryo10Leo:20200109154805p:plain
自身が作成しているアプリでは、記事投稿編集機能として上記のように編集アイコンを表示させています。
左からそれぞれ記事編集(edit_article_path)、記事削除(article_path)、記事一覧(articles_path)とそれぞれの操作を行います。
ただHTML要素などにリンク付けした場合は、link_to do~endでブロック内に書き込む必要があります。

example.html.erb

<%= link_to root_path do %>
(html要素)
<% end %>

これを踏まえてこのように書いております。

<div class="edit-icons">

    <%= link_to edit_article_path(@article) do %>
    <i class="fa fa-edit"></i>
    <% end %>

    <%= link_to article_path(@article), method: :delete, data:{confirm:"こちらの投稿を削除しますか?"} do %>
    <i class="fa fa-trash"></i>
    <% end %>

    <%= link_to articles_path do %>
    <i class="fa fa-list-ul"></i>
    <% end %>

</div>

アイコンは、Font Awesomeです。
各アイコンごとにパスを指定してブロックで囲むことで、アイコンをクリックした時に各リクエストを実行することができます。