Comment fermer le conteneur dans une boucle?

Question

J'ai une liste de produits et je veux afficher une annonce dans le flux de produits.

Je veux quelque chose comme:

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

Dans Erb, j'aurais:

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

Comment traduisez-vous cela par Haml ou Slim?

Je ne veux pas casser la boucle en deux boucles pour deux raisons: je ne sais pas que le nombre de produits par page et j'ai un code plus élaboré qui utilise les mêmes astuces HTML avec les rails cycle() assistant. Donc, cela m'aidera beaucoup à trouver une astuce pour le rendre possible.

Answer 1

HAML vous permet d'écrire HTML brut comme sortie lorsque vous le souhaitez. Bien que bizarre, vous pouvez l'utiliser pour atteindre vos objectifs ici, comme vous l'avez fait avec 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>

L'indentation a l'air bizarre, mais vous pouvez voir que vous avez deux conteneurs avec les trucs Adsense à l'extérieur.

Answer 2

À Haml

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

Je ne me soucierais pas du conteneur, configurez simplement le CSS pour gérer le produit et les classes d'annonces. (Qui soulève également le fait que vous avez plusieurs ID du même nom, ceux-ci doivent être changés en classes).

Answer 3

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

Cela devrait le faire?

Answer 4

Une solution HAML possible, en utilisant le surround assistant:

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

C'est un peu un piratage, en ce sens que nous «Faking» fermons et ouvrons le div de conteneur; En ce qui concerne Haml, nous y sommes toujours. Pour cette raison, il introduit également un peu de répétition en ce que vous devez spécifier la classe "conteneur" (et tout autre attribution que Div pourrait avoir) à deux endroits.

Cette solution est similaire à Solution de @ phrogz Mais c'est un peu plus "haml-ly" et vous permet d'utiliser la syntaxe HAML pour définir l'ajout de div.