Question

拥有以下rails视图（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（位于另一个循环内：{{1} }循环）。

注意两个@competitors.each ruby循环在haml中处于相同的“节点级别”，而它们的css类.each和.accordion-heading必须是.accordion-body css类容器。

我需要的resoulting html如下：

.accordion-group

...虽然我目前得到了错误的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>
...

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

Answer 1

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

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

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

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

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

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

Answer 2

不缩进第二个块（如下所示）吗？

.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"]

嵌套haml循环以使“Collapse bootstrap-collapse.js”在Rails视图中正常工作

2 个答案: