如何关闭容器在循环中？

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>

在 ERB 中，我会：

<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 cycle()cycle() 帮助程序。因此，找到一个使之成为可能的技巧将对我有很大帮助。

Answer 1

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 2

在 HAML 中，

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

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

Answer 3

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

这个应该可以吧？

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

这有点像 hack，因为我们“假装”关闭和打开容器 div；据哈姆所知，我们仍然深陷其中。出于这个原因，它还引入了一些重复，因为您必须在两个位置指定“容器”类（以及 div 可能具有的任何其他属性）。

此解决方案类似于 @Phrogz 的解决方案，但它更“Haml-ly”并允许您使用 Haml 语法定义添加 div。