【Bootstrap】Rails의 each 메소드로 꺼내는 횟수에 제한을 걸리는 이야기 ~view에서 사용할 수 있었다~
해결하고 싶은 것
Carousel에서 view 파일의 작성이 완료되고, 여기에는 신규 투고를 새로운 것부터 차례로 표시해 가기로 했습니다.
each 메소드로 할 수 있을 것 같다~라고 생각했습니다만, 디폴트에서는 표시할 수 있는 영역이 3개가 되어 있습니다.
※아래 이미지, Heading 부분입니다
DB에 들어 있는 데이터가 4개 이상이 되었을 경우, 자동으로 2단째 이후가 형성되어 버리므로, each 메소드로 꺼내는 수에 제한을 걸어 3개까지 억제하는 방법을 찾았습니다 .
원래 소스 코드 (Heading 부분
<div class="row">
<div class="col-lg-4">
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>
<h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
</div>
〜以下同じものがあと2つ繰り返し〜
변경한 것
<div class="row">
<% @item.first(3).each do |item| %> ⬅️追加したコード
<div class="col-lg-4">
<%= image_tag item.image, width: '360', height: '280' %>
<h1><%= item.hoge %></h1>
名前
<h4><%= item.hogehoge %></h4>
紹介
<h4><%= item.huga %></h4>
<button type="button" class="btn btn-outline-secondary rounded-pill"><%= link_to "詳細を見る" %></button>
</div>
<% end %>
</div>
<% @item.first(3).each do |item| %>
라고 하는 것으로 each 메소드로 배열로부터 꺼낼 횟수를 지정했습니다.이번 케이스라면 3곳이므로
(3)
입니다.DRY 정신에 따라 같은 부분을 2곳 삭제할 수 있어 외형도 상당히 깨끗이 했습니다.
이번 일로 자신의 상상할 수 있는 범위는 거의 가능하지 않을까? 라고 생각했습니다.
프로그래밍은 대단한 기술의 집대성이군요.
선인들의 지혜에 감사합니다.
우선은 여러가지 방법으로 검색해 찾아, 찾아낸 것을 트라이해 보는 것이 중요하다고 실감했습니다.
도움이되었습니다.
Ruby each 루프의 횟수 지정
고마워요.
Reference
이 문제에 관하여(【Bootstrap】Rails의 each 메소드로 꺼내는 횟수에 제한을 걸리는 이야기 ~view에서 사용할 수 있었다~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/bon_eng/items/b44d10b6f3fb86b2ba27텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)