Como faço para fechar o contêiner em um loop?

Question

Tenho uma lista de produtos e desejo mostrar um anúncio no feed de produtos.

Eu quero algo como:

<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>

No ERB, eu teria:

<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>

Como você traduz isso para Haml ou Slim?

Não quero quebrar o loop em dois loops por dois motivos: não sei a contagem de produtos por página e tenho um código mais elaborado que usa os mesmos truques de HTML com o helper cycle() do Rails.Então, vai me ajudar muito a encontrar um truque para tornar isso possível.

Answer 1

Haml permite que você escreva HTML bruto como saída quando você quiser.Embora estranho, você pode usar isso para atingir seus objetivos aqui, como fez com 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>

O recuo parece estranho, mas você pode ver que tem dois contêineres com as coisas do AdSense do lado de fora.

Answer 2

Em HAML

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

Eu não me importaria com o contêiner, apenas configuraria o css para lidar com o produto e as classes de anúncios.(O que também traz à tona o fato de que você tem vários ids com o mesmo nome, eles devem ser alterados para classes).

Answer 3

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

Isso deve servir?

Answer 4

Uma possível solução Haml, usando o surround helper :

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

Isso é meio que um hack, já que estamos "fingindo" fechar e abrir o div do contêiner;pelo que Haml sabe, ainda estamos nele.Por esse motivo, também introduz um pouco de repetição, pois você precisa especificar a classe "container" (e quaisquer outros atributos que div possa ter) em dois lugares.

Esta solução é semelhante à solução de @Phrogz , mas é um pouco mais "Haml-ly" e permite que vocêuse a sintaxe de Haml para definir a adição de div.