Как закрыть контейнер <div>в цикле? - PullRequest
Новая
       51

Как закрыть контейнер <div>в цикле?

3 голосов
/ 17 января 2012

У меня есть список товаров, и я хочу показать объявление в ленте товаров.

Я хочу что-то вроде: 

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

В ERB у меня будет: 

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

Как вы переводите это в Haml или Slim?

Я не хочу разбивать цикл на два цикла по двум причинам: я не знаю количество продуктов по страницам, и у меня есть более сложный код, который использует те же трюки HTML с помощником Rails cycle().Так что мне очень поможет найти трюк, чтобы сделать это возможным.

Ответы [ 4 ]

2 голосов
/ 22 января 2012

Возможное решение Haml с использованием помощника surround : 

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

Это что-то вроде хака, потому что мы "притворяемся", закрывая и открывая контейнер div; насколько Хэмл знает, что мы все еще в этом. По этой причине он также вводит немного повторения в том смысле, что вы должны указать класс «контейнер» (и любые другие атрибуты, которые может иметь div) в двух местах.

Это решение похоже на @ решение Phrogz , но это немного более "Haml-ly" и позволяет вам использовать синтаксис Haml для определения add div.

2 голосов
/ 17 января 2012 
- products.each_with_index do |product,index|
  .product
    = product
    - if index == 2
      .ad= Adsense Stuff

Это должно сделать это?

2 голосов
/ 21 января 2012

Haml позволяет вам писать необработанный HTML как вывод, когда вы этого хотите. Хотя это и странно, но вы можете использовать это для достижения своих целей, как это было с 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>

Отступ выглядит странно, но вы можете видеть, что у вас есть два контейнера с содержимым AdSense снаружи.

2 голосов
/ 17 января 2012

В HAML 

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

Я не стал бы беспокоиться о контейнере, просто настроил CSS для работы с классами товаров и объявлений.(Что также говорит о том, что у вас есть несколько идентификаторов с одинаковыми именами, их следует заменить на классы).

...