嵌套循環HAML獲得 「摺疊引導-collapse.js」 Rails內部意見工作正常

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（它在另一個循環中：@competitors.each循環）。

注意兩個.each紅寶石環路，是在Haml的「節點級別」，而他們的CSS類.accordion-heading和.accordion-body必須到.accordion-group CSS類容器。

的resoulting 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"> 
... 

我找不到縮進的正確方法哈姆...

Answer 1

做這樣的事情在Haml的方式是讓你的數據轉換成合適的格式第一，這樣它應該如何apear頁面上的結構相匹配。然後遍歷這個結構，標記應該更容易創建和更清晰。

例如，在這種情況下，您需要依次重複個對個元素，每個元素對應一個元素，而不是單獨遍歷每個數組。然後，你可以做這樣的事情，（其中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已經是一個數組的數組，所以我們解構它來得到我們想要的PARAMATERS。

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