¿Cómo cierro el contenedor en un bucle?

Question

Tengo una lista de productos y quiero mostrar un anuncio en el feed de productos.

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

En ERB, tendría:

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

¿Cómo se traduce esto a Haml o Slim?

No quiero romper el ciclo en dos ciclos por dos razones: no sé que los productos cuentan por página y tengo un código más elaborado que usa los mismos trucos HTML con el ayudante cycle() de Rails.Por lo tanto, me ayudará mucho encontrar un truco que lo haga posible.

Answer 1

Haml le permite escribir HTML sin procesar como salida cuando lo desee.Aunque es extraño, puede usar esto para lograr sus objetivos aquí, como lo hizo con 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>

La sangría parece extraña, pero puede ver que tiene dos contenedores con el contenido de AdSense afuera.

Answer 2

En HAML

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

No me molestaría con el contenedor, solo configuro el CSS para tratar con las clases de productos y anuncios.(Lo que también trae a colación el hecho de que tiene varios identificadores con el mismo nombre, estos deben cambiarse a clases).

Answer 3

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

¿Esto debería ser suficiente?

Answer 4

Una posible solución de Haml, usando el ayudante surround :

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

Esto es un truco, ya que estamos "fingiendo" cerrar y abrir el contenedor div;por lo que Haml sabe, todavía estamos en eso.Por esta razón, también introduce un poco de repetición en el sentido de que debe especificar la clase "contenedor" (y cualquier otro atributo que div pueda tener) en dos lugares.

Esta solución es similar a la solución de @ Phrogz pero es un poco más "Haml-ly" y te permiteuse la sintaxis Haml para definir el div add.