Refactor повторяющийся вид HTML в каждую петлю для Руби

Question

я следующий HTML код

<div class="col-xs-1"> 
    <img src="/assets/X.jpg" class="img-responsive" alt="X"> 
    <h6>X</h6> 
</div> 

<div class="col-xs-1"> 
    <img src="/assets/Y.jpg" class="img-responsive" alt="Y"> 
    <h6>Y</h6> 
</div> 

<div class="col-xs-1"> 
    <img src="/assets/Z.jpg" class="img-responsive" alt="Z"> 
    <h6>Z</h6> 
</div> 
... 

Как вы можете видеть, что есть тонна избыточности (тем более, что это на самом деле повторение 10+ раз не только 3 я здесь). Я пытаюсь продумать, как сделать что-то подобное в СУШЕ каждом цикле, но я немного затруднился.

Первоначально я думал, что просто объявить в контроллере для этой точки зрения:

@images = ["X", "Y", "Z"] 

А потом в представлении сделать

<% @images.each do |image| %> 
<div class="col-xs-1"> 
    <img src="/assets/#{image}.jpg" class="img-responsive" alt="#{image}"> 
    <h6>"#{image}"</h6> 
</div> 
<% end %> 

Но этот синтаксис не должен быть прав, так как все изображения показывают сломанной. Любые мысли о том, что я делаю неправильно?

Кроме того, если это оказалось не очень эффективным способом рефакторинга, я очень открыт для предложений!

Answer 1

Вы ожидаете, что интерполировать #{image}, но этот код на картинке src, alt атрибуты - это просто текст, а не рубин. То же самое относится к тексту в теге h6.

Для вывода их значений необходимо использовать erb scriplets <%=...%>.

Обновление вида кода следующее:

<% @images.each do |image| %> 
<div class="col-xs-1"> 
    <img src="<%= "/assets/#{image}.jpg" %>" class="img-responsive" alt="<%= "#{image}" %>"> 
    <h6><%= "#{image}" %></h6> 
</div> 
<% end %>