كيف أقوم بإغلاق الحاوية <div> في حلقة؟

Question

لدي قائمة بالمنتجات وأريد عرض إعلان في خلاصة المنتج.

أريد شيئًا مثل:

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

كيف تترجم هذا إلى هامل أو سليم؟

لا أريد تقسيم الحلقة إلى حلقتين لسببين:لا أعرف عدد المنتجات حسب الصفحة ولدي بعض التعليمات البرمجية الأكثر تفصيلاً والتي تستخدم نفس حيل HTML مع Rails cycle() المساعد.لذا، سيساعدني ذلك كثيرًا في العثور على خدعة لجعل ذلك ممكنًا.

Answer 1

يتيح لك 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 في الخارج أيضًا.

Answer 2

في هامل

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

لن أهتم بالحاوية، فقط قم بإعداد CSS للتعامل مع المنتج وفئات الإعلانات.(مما يوضح أيضًا حقيقة أن لديك معرفات متعددة بنفس الاسم، ويجب تغييرها إلى فئات).

Answer 3

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

هذا ينبغي أن تفعل ذلك؟

Answer 4

حل هامل ممكن باستخدام 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 لتحديد إضافة div.