Wie schließe ich den Container in einer Schleife?

Question

Ich habe eine Produktliste und möchte eine Anzeige im Produkt-Feed schalten.

Ich möchte so etwas wie:

<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 hätte ich:

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

Wie übersetzen Sie dies in Haml oder Slim?

Ich möchte die Schleife aus zwei Gründen nicht in zwei Schleifen unterbrechen: Ich kenne die Anzahl der Produkte pro Seite nicht und habe einen ausgefeilteren Code, der dieselben HTML-Tricks mit dem Rails-cycle()-Helfer verwendet.Es wird mir also sehr helfen, einen Trick zu finden, der dies ermöglicht.

Answer 1

Mit Haml können Sie Roh-HTML als Ausgabe schreiben, wenn Sie es möchten.Obwohl seltsam, können Sie dies verwenden, um Ihre Ziele hier zu erreichen, wie Sie es mit Erb getan haben:

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>

Die Einrückung sieht seltsam aus, aber Sie können sehen, dass Sie zwei Container mit dem AdSense-Material außerhalb haben.

Answer 2

in haml generasacodicetagpre.

Ich würde mich nicht mit dem Container stören, richten Sie einfach die CSS ein, um sich mit den Produkt- und Anzeigenklassen umzugehen.(Was auch die Tatsache bringt, dass Sie mehrere IDs mit demselben Namen haben, sollten diese in den Klassen geändert werden).

Answer 3

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

Das sollte es tun?

Answer 4

Eine mögliche Haml-Lösung mit dem surround-Helfer :

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

Dies ist insofern ein Hack, als wir das Schließen und Öffnen des Container-Divs "vortäuschen";Soweit Haml weiß, sind wir immer noch dabei.Aus diesem Grund führt dies auch zu einer gewissen Wiederholung, da Sie die Klasse "container" (und alle anderen Attribute, die div möglicherweise hat) an zwei Stellen angeben müssen.

Diese Lösung ähnelt der @ Phrogz-Lösung , ist jedoch etwas "Haml-ly" und ermöglicht es IhnenVerwenden Sie die Haml-Syntax, um das Add-Div zu definieren.