Come chiudere il contenitore in un ciclo?

Question

Ho un elenco di prodotti e desidero mostrare un annuncio nel feed dei prodotti.

Voglio qualcosa del tipo:

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

In ERB, avrei:

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

Come traduci questo in Haml o Slim?

Non voglio spezzare il ciclo in due cicli per due ragioni: non conosco i prodotti contati per pagina e ho del codice più elaborato che usa gli stessi trucchi HTML con l'helper cycle() di Rails.Quindi, mi aiuterà molto trovare un trucco per renderlo possibile.

Answer 1

Haml ti consente di scrivere HTML grezzo come output quando lo desideri.Anche se strano, puoi usarlo per raggiungere i tuoi obiettivi qui, come hai fatto 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>

Il rientro sembra strano, ma puoi vedere che hai due contenitori con gli elementi di AdSense all'esterno.

Answer 2

In HAML

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

Non mi preoccuperei del contenitore, basta impostare il css per gestire il prodotto e le classi di annunci.(Il che porta anche in primo piano il fatto che hai più ID con lo stesso nome, questi dovrebbero essere cambiati in classi).

Answer 3

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

Questo dovrebbe bastare?

Answer 4

Una possibile soluzione Haml, utilizzando l ' surround helper :

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

Questo è un po 'un trucco, in quanto stiamo "fingendo" la chiusura e l'apertura del contenitore div;per quanto ne sa Haml, ci siamo ancora dentro.Per questo motivo introduce anche un po 'di ripetizione in quanto devi specificare la classe "container" (e qualsiasi altro attributo che div potrebbe avere) in due punti.

Questa soluzione è simile alla soluzione di @ Phrogz ma è un po 'più "Haml-ly" e ti permette diusa la sintassi Haml per definire il div add.