ruby-on-rails - 嵌套haml循环以使 "Collapse bootstrap-collapse.js"在Rails View 中正常工作

Question

具有以下 rails View (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 循环)。

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

我需要的结果 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的正确方法...

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已经是一个数组数组，所以我们对其进行解构以获得我们想要的参数。