3

我有一个产品列表，我想在产品 Feed 中展示广告。

我想要类似的东西：

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

我不想在两个循环中打破循环，原因有两个：我不知道产品按页面计数，而且我有一些更精细的代码，它们使用与 Railscycle()帮助程序相同的 HTML 技巧。因此，找到使之成为可能的技巧对我有很大帮助。

4

4 回答 4

2

在 HAML 中

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

我不会打扰容器，只需设置 css 来处理产品和广告类。（这也带来了一个事实，即您有多个同名的 id，这些应该更改为类）。

于 2012-01-17T11:15:47.203 回答
2 
- products.each_with_index do |product,index|
  .product
    = product
    - if index == 2
      .ad= Adsense Stuff

这应该做吗？

于 2012-01-17T12:08:50.477 回答
2

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 内容。

于 2012-01-21T06:26:43.740 回答
2

一个可能的 Haml 解决方案，使用surroundhelper：

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

这有点小技巧，因为我们在“伪造”关闭和打开容器 div；据 Haml 所知，我们仍在其中。出于这个原因，它还引入了一些重复，因为您必须在两个地方指定“容器”类（以及 div 可能具有的任何其他属性）。

此解决方案类似于@Phrogz 的解决方案，但它更“Haml-ly”，并允许您使用 Haml 语法来定义添加 div。

于 2012-01-22T03:16:13.900 回答