Nesting haml boucles pour obtenir "Réduire bootstrap-collapse.js" fonctionne correctement dans les vues Rails

Question

Avoir les rails suivants vue (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"] 

J'ai besoin classe css .accordion-group, contenir à la fois .accordion-heading (qui est à l'intérieur de la boucle @ categories.each) et .accordion-body (qui se trouve dans l'autre boucle: boucle @competitors.each).

Notez les deux boucles rubis .each, sont au même « niveau de noeud » dans haml, alors que leurs classes et .accordion-body.accordion-heading css doivent être dans .accordion-group conteneur de classe css.

Le html resoulting dont j'ai besoin, est comme ce qui suit:

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

... alors que je reçois actuellement ce mauvais code 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"> 
... 

Je ne peux pas trouver le bon chemin pour tiret haml ...

Answer 1

La façon de faire quelque chose comme ça dans Haml est d'obtenir vos données dans le format premier, et qui correspond à la structure de la façon dont il devrait apear sur la page. Puis itérer sur cette structure et le balisage devrait être beaucoup plus facile à créer et à clarifier.

Dans ce cas, par exemple, vous souhaitez parcourir sur paires des éléments à tour de rôle, un de chaque groupe, plutôt que sur chaque groupe individuellement. Ensuite, vous pouvez faire quelque chose comme ça, (où each_pair n'est pas une vraie méthode, il est juste pour la démonstration):

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

Dans Ruby, vous pouvez combiner des réseaux pour obtenir des paires (ou triplés ou plus) avec le zip method , donc ce que vous voulez est quelque chose comme ceci:

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

Dans ce cas @competitors est déjà un tableau de tableaux, donc nous déstructurer pour obtenir les paramaters que nous voulons.

Answer 2

Ne pas indenter votre deuxième bloc (comme ci-dessous) fonctionne?

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