使Rails循环遍历元素以表示表中的项目

Question

我正在构建一个Rails应用程序,我使用六边形网格显示其博客帖子的链接作为每个帖子的图像六边形.为清楚起见,这是静态帖子的样子:

 <ul id="hexGrid">
            <li class="hex">
                <a class="hexIn" href="contact">
                    <img src="https://structurepoint.files.wordpress.com/2014/09/wp_20140804_041.jpg" alt="" />
                    <h1>This is a title</h1>
                    <p>Some sample text about the article this hexagon leads to</p>
                </a>
            </li>
            <li class="hex">
                <a class="hexIn" href="#">
                    <img src="https://structurepoint.files.wordpress.com/2014/09/wp_20140804_041.jpg" alt="" />
                    <h1>This is a title</h1>
                    <p>Some sample text about the article this hexagon leads to</p>
                </a>
            </li>
            <li class="hex">
                <a class="hexIn" href="#">
                    <img src="https://structurepoint.files.wordpress.com/2014/09/wp_20140804_041.jpg" alt="" />
                    <h1>This is a title</h1>
                    <p>Some sample text about the article this hexagon leads to</p>
                </a>
            </li>
        </ul>

要查看它的完整代码,这里是JSFiddle.

这是问题所在.我需要使六边形动态化,我希望它在我的Post表中为它们中的每一个生成一个.为此,我尝试迭代这样:

 <ul id="hexGrid">
            <li class="hex">
                <a class="hexIn" href="#">
                    <% @posts.each do |post| %>
                        <%= image_tag("http://www.fearthewave.com/wp-content/uploads/2016/05/bevo-768x410.png", :alt => "rss feed") %>
                        <h1><%= post.title %></h1>
                    <p><%= post.category %></p>
                    <% end %>
                </a>
            </li>
</ul>

即使在我的控制器中,我正在设置@posts = Post.all并且数据库中有五个帖子,上面的代码只为帖子生成一个六边形.我希望视图渲染其中的5个.

是否有可能使六边形<li>动态？

可能的问题

1. 迭代中有静态图像链接,为什么这样做？我将该图像链接作为占位符.我还没有安装Paperclip宝石 - 我想要它生产5个六边形,现在它使用静态图像很好.将来,这将链接到与帖子相关联的图像.

Answer 1

我认为你在错误的地方做循环:

<ul id="hexGrid">
  <% @posts.each do |post| %>
  <li class="hex">
    <a class="hexIn" href="#">
      <%= image_tag("http://www.fearthewave.com/wp-content/uploads/2016/05/bevo-768x410.png", :alt => "rss feed") %>
      <h1><%= post.title %></h1>
      <p><%= post.category %></p>
    </a>
  </li>
  <% end %>
</ul>