具有以下 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的正确方法...
最佳答案
在 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
已经是一个数组数组,所以我们对其进行解构以获得我们想要的参数。
关于ruby-on-rails - 嵌套haml循环以使 "Collapse bootstrap-collapse.js"在Rails View 中正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10673415/