将重复视图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 %>