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

（@ category.eachループ内にある）と（他のループ：ループ内にある）の.accordion-group両方を含むcssクラスが必要です。.accordion-heading.accordion-body@competitors.each

2つの.eachrubyループは、hamlでは同じ「ノードレベル」にありますが、それらのcssクラスは.accordion-heading、cssクラスコンテナに含ま.accordion-bodyれている必要があります。.accordion-group

私が必要とするresoultinghtmlは、次のようなものです。

<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でこのようなことを行う方法は、最初にデータを正しい形式にして、ページに表示される方法の構造と一致させることです。次に、この構造を繰り返し処理すると、マークアップの作成がはるかに簡単になり、明確になります。

この場合、たとえば、各配列を個別に繰り返すのではなく、各配列から1つずつ、要素のペアを順番に繰り返す必要があります。次に、次のようなことを行うことができます（each_pair実際の方法ではなく、デモンストレーション用です）。

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

Rubyでは、配列を組み合わせてペア（またはトリプレット以上）をzipメソッドで取得できるため、必要なものは次のようになります。

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

この場合@competitors、すでに配列の配列であるため、必要なパラメーターを取得するためにそれを分解します。

于 2012-05-20T18:14:30.843 に答える
0

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"]
于 2012-05-20T12:57:26.717 に答える