4

具有以下导轨视图（haml）：

.row
  .span7
    %h1 Listing categories
    %p
      - @categories.each do |category|
        .accordion-group
          .accordion-heading
            .accordion-toggle{"data-toggle" => "collapse", "data-target" => "##{category.path}"}= link_to category.name, "##{category.path}"
      - @competitors.each do |category_path, competitors|
        .accordion-body.table.collapse.in{:id => "#{category_path}"}
          %table.accordion-inner
            %thead
              %tr
                %th= "Project"
                %th= "Description"
                %th= "Watchers"
                %th= "Forks"
            %tbody
              - competitors.each do |competitor|
                %tr
                  %td
                    = link_to "#{competitor["html_url"]}".sub( "https:\/\/github.com\/", "" ), "#{competitor["html_url"]}"
                  %td
                    %span »
                    = competitor["description"]
                  %td
                    %span.badge.badge-info= competitor["watchers"]
                  %td
                    %span.badge.badge-warning= competitor["forks"]

我需要 css 类.accordion-group来包含.accordion-heading（在 @categories.each 循环内）和.accordion-body（在另一个循环内：@competitors.each循环）。

请注意，这两个.eachruby​​ 循环在 haml 中处于相同的“节点级别”，而它们的 css 类.accordion-heading并且.accordion-body必须进入.accordion-groupcss 类容器。

我需要的结果 html 如下所示：

<div class="accordion-group">
  <div class="accordion-heading">
  <div class="accordion-body in collapse" id="collapse_id">
</div>
<div class="accordion-group">
  <div class="accordion-heading">
  <div class="accordion-body in collapse" id="collapse_id">
</div>
<div class="accordion-group">
  <div class="accordion-heading">
  <div class="accordion-body in collapse" id="collapse_id">
</div>
...

...虽然我目前得到这个错误的 html 代码：

<div class="accordion-group">
  <div class="accordion-heading">
</div>
<div class="accordion-group">
  <div class="accordion-heading">
</div>
<div class="accordion-group">
  <div class="accordion-heading">
</div>
...
<div class="accordion-body in collapse" id="collapse_id">
<div class="accordion-body in collapse" id="collapse_id">
<div class="accordion-body in collapse" id="collapse_id">
...

我找不到缩进haml的正确方法...

4

2 回答 2

2

在 Haml 中执行此类操作的方法是首先将您的数据转换为正确的格式，以便它与页面上应该出现的结构相匹配。然后迭代这个结构，标记应该更容易创建和更清晰。

例如，在这种情况下，您希望依次迭代成对的元素，一个来自每个数组，而不是单独遍历每个数组。然后你可以做这样的事情，（这each_pair不是一个真正的方法，它只是为了演示）：

- each_pair do |category, competitors|
  .accordion-group
    .accordion-heading
      ...
    .accordion-body
      ...

zip在 Ruby 中，您可以使用方法组合数组来获得对（或三元组或更大），所以您想要的是这样的：

- @categories.zip(@competitors) do |category, (category_path, competitors)|
  .accordion-group
    ...etc...

在这种情况下@competitors已经是一个数组数组，所以我们对其进行解构以获得我们想要的参数。

于 2012-05-20T18:14:30.843 回答
0

缩进你的第二个块（如下所示）不起作用吗？

.row
  .span7
    %h1 Listing categories
    %p
      - @categories.each do |category|
        .accordion-group
          .accordion-heading
            .accordion-toggle{"data-toggle" => "collapse", "data-target" => "##{category.path}"}= link_to category.name, "##{category.path}"
        - @competitors.each do |category_path, competitors|
          .accordion-body.table.collapse.in{:id => "#{category_path}"}
            %table.accordion-inner
              %thead
                %tr
                  %th= "Project"
                  %th= "Description"
                  %th= "Watchers"
                  %th= "Forks"
              %tbody
                - competitors.each do |competitor|
                  %tr
                    %td
                      = link_to "#{competitor["html_url"]}".sub( "https:\/\/github.com\/", "" ), "#{competitor["html_url"]}"
                    %td
                      %span »
                      = competitor["description"]
                    %td
                      %span.badge.badge-info= competitor["watchers"]
                    %td
                      %span.badge.badge-warning= competitor["forks"]
于 2012-05-20T12:57:26.717 回答