將重復視圖HTML重構到Ruby的每個循環中

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次）。 我試圖通過每個循環將這樣的東西制作成DRY的方式進行思考，但是有點困難。

我最初以為只是在控制器中為此視圖聲明：

@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} ，但是image src中的代碼alt屬性只是文本，而不是ruby。 同樣適用於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 %>