代码之家 › 专栏 › 技术社区 › ECsAUtaVku

基础文本网格

zurb-foundation ruby-on-rails css

ECsAUtaVku · 技术社区 · 11 年前

我试图创建一个包含文本而不是图像的网格,类似于Zurb模板中的“内容部分”: http://foundation.zurb.com/templates/orbit.html

我想在每行上创建三个文本块。

我可以创建这个,但出现的问题是,有时在我的数据中,一行只有一个或两个文本块。

例如,如果产品缺少位置,是否有方法将成分移动到位置,或者如果缺少类别和位置将成分移动至位置?

我正在使用RubyonRails和基础5。

谢谢

  <div class="row">
    <div class="large-4 columns">
      <% unless @product.category.nil? %>
      <div class="product-heading">Product Category</div>
      <div class="product-value">
        <%= @product.category %>
      </div>
      <% end %>
    </div>

    <div class="large-4 columns">
      <% unless @product.location.nil? %>
      <div class="product-heading">Product Location</div>
      <div class="product-value">
        <%= @product.location.sort.join(", ") %>
      </div>
      <% end %>
    </div>

    <div class="large-4 columns">
      <% unless @product.ingredients.nil? %>
      <div class="product-heading">Product Ingredients</div>
      <div class="product-value">
        <%= @product.ingredients.sort.join(", ") %>
      </div>
      <% end %>
    </div>
  </div>

根据Max Williams的建议生成的HTML。

  <div class="row">
    <div class="large-4 columns">
      <div class="product-heading">Product Category</div>
      <div class="product-value">Food </div>
    </div>
    <div class="large-4 columns">
      <div class="product-heading">Product Ingredients</div>
      <div class="product-value">Flour, Sugar </div>
    </div>
  </div>

Javascript尝试删除空的li标记

<script>$('li, p')
  .filter(function() {
    return $.trim($(this).text()) === '' && $(this).children().length == 0
  })
  .remove();
</script>

1 回复 | 直到 11 年前

Max Williams 11 年前

关键是寻找重复的元素,并将其抽象出来,例如使用循环。如

<% product_cells = [["Category", @product.category], ["Location", @product.location_string], ["Ingredients", @product.ingredients_string]] %>
<div class="row">
  <% product_cells.each do |title, data| %>
    <% unless data.blank? %>    
      <div class="large-4 columns">
        <div class="product-heading">Product <%= title %></div>
        <div class="product-value"><%= data %> </div>
      </div>
    <% end %>
  <% end %>
</div>

请注意,我将测试放在了另一个地方,因此如果数据为空,将跳过整个大4 div。

这类事情 @product.location.sort.join(", ") 通常应替换为产品模型中的方法,例如

#in Product
def location_string
  self.location.reject(&:blank?).sort.join(", ")
end

def ingredients_string
  self.ingredients.reject(&:blank?).sort.join(", ")
end

那么您可以将上述代码更改为

<% product_cells = [["Category", @product.category], ["Location", @product.location_string], ["Ingredients", @product.ingredients_string]] %>

EDIT:更改字符串方法以处理nils

编辑2:将我的原始答案改为使用我添加的模型方法。