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}进行插值，但图片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 %>

将重复的视图HTML重构为Ruby的每个循环

1 个答案: