Question

我有一个产品列表，我想在产品Feed中展示广告。

我想要类似的东西：

<div id="container">
    <div id="product">Bla..</div>
    <div id="product">Bla..</div>
    <div id="product">Bla..</div>
</div>
<div id="add">
    Adsense Stuff
</div>
<div id="container">
    <div id="product">Bla..</div>
    <div id="product">Bla..</div>
    <div id="product">Bla..</div>
    <div id="product">Bla..</div>
    <div id="product">Bla..</div>
</div>

在再培训局，我会：

<div id="container">
    <% productes.each_with_index do |product,index| %>
         <div id="product"><%= product %></div>
         <% if index == 2 %>
            </div>
            <div id="add">
                Adsense Stuff
            </div>
            <div id="container">
         <% end %>
     <% end %>
</div>

你如何将其翻译成Haml或Slim？

我不想在两个循环中打破循环有两个原因：我不知道产品是否按页面计算，而且我有一些更复杂的代码，它们使用与Rails相同的HTML技巧cycle()帮手。所以，找到一个让它成为可能的技巧对我有很大的帮助。

Answer 1

在HAML中

-products.each_with_index do |product,index|
  .product= product
  -if index == 2
    .ad= Adsense Stuff

我不打扰容器，只需设置css来处理产品和广告类。（这也表明你有多个同名的id，这些应该改为类）。

Answer 2

- products.each_with_index do |product,index|
  .product
    = product
    - if index == 2
      .ad= Adsense Stuff

应该这样做吗？

Answer 3

Haml允许您根据需要编写原始HTML作为输出。虽然很奇怪，但你可以使用它来实现你的目标，就像你使用Erb一样：

TEMPLATE = '
.container
  - products.each_with_index do |product,index|
    - if index == 2
      </div>
      <div class="ad">AdSense Stuff</div>
      <div class="container">
    .product<
      = product
'

require 'haml'
products = %w[ cat box kitten shoes hounds ]
puts Haml::Engine.new(TEMPLATE).render binding

#=> <div class='container'>
#=>   <div class='product'>cat</div>
#=>   <div class='product'>box</div>
#=>   </div>
#=>   <div class="ad">AdSense Stuff</div>
#=>   <div class="container">
#=>   <div class='product'>kitten</div>
#=>   <div class='product'>shoes</div>
#=>   <div class='product'>hounds</div>
#=> </div>

缩进看起来很奇怪，但您可以看到有两个容器，其中包含AdSense内容。

Answer 4

可能的Haml解决方案，使用surround helper：

.container
  -products.each_with_index do |product,index|
    .product=product
    -if index == 2
      =surround "</div>", "<div class='container'>" do
        .add
          Adsense stuff

这有点像黑客，因为我们“假装”关闭并打开容器div;哈姆尔知道我们还在其中。出于这个原因，它还引入了一些重复，因为你必须在两个地方指定“容器”类（以及div可能具有的任何其他属性）。

此解决方案与@Phrogz's solution类似，但这有点“Haml-ly”，并允许您使用Haml语法来定义add div。

如何在循环中关闭容器<div>？</div>

4 个答案: