Class html.erb 文件中的名称分隔

Question

我在循环中有一个 if 语句，用于将变量（名为 var_class）更改为 class 名称。我怎样才能使它成为连续的字符串？

代码如下：

<% j = 0%>
<% @question.each do |index| %>
<% var_class = ""%>
   <% j == 0 ? var_class = "tab-pane fade active show" : var_class = "tab-pane fade" %>
   <div class=<%=var_class %> style='height: 444px; overflow-y: auto;' id=<%="question#{j+=1}"%>>

但是当我在 chrome 检查中查看 html 时，它不是作为连续字符串包含在内，而是在有 space 时被分隔开。像这样：

class= "tab-pane" fade active show

但我希望它是

class = "tab-pane fade active show"

我试过 <div class=<%=#{var_class} %> 和 <div class=<%="var_class" %> 以及它们的派生词。有人可以帮忙吗？

Answer 1

我认为您遗漏了 class 和 id 属性的引号。

<div class='<%=var_class %>' style='height: 444px; overflow-y: auto;' id='<%="question#{j+=1}"%>'>

Answer 2

Messias 的回答是它的基础。如果字符串周围没有引号，DOM 会在遇到 space 时停止 classes。它认为其他项目是 div 标签上的属性。

以最佳实践的方式，我们通常希望避免在 rails 视图中进行局部赋值（在其中设置变量）。这真的很想成为一个帮助者或装饰者（如果你真的需要那个级别的功能和可测试性）。

[以下是我没有测试过的伪代码，所以可能会有一些小错误]

在您的 ERB 视图中：

<% @questions.each do |index| %>
  <div class="<%= classy(index) %>" id="[TBD see below]">
<% end %>

如果可能的话，我建议找一个比 div 更语义化的 HTML 标签。迭代器 (.each) 往往是一个对象列表，因此内部包含 LI 的 UL（无序列表）或 OL（有序列表）可能是更好的选择。默认情况下，UL 为您提供按钮，OL 为您提供编号，但这些可以更改。

您可能还想避免在 ID 名称中使用 # 符号，因为您会在 css 文件中使用 #name 调用 ID。所以#name#2 可能会在 DOM 中给你一些意想不到的混乱结果。您可能希望使用 each_ with _index 来获取数组和索引值。很好地解释了这里的差异：What is the "right" way to iterate through an array in Ruby?

<ul class="questions">
<% @questions.each_with_index do |question,index| %>
  <li class="<%= classy(question, index) %>" id="question_<%= index %>">
    [CONTENT]
  </li>
<% end %>
</ul>

whatever_helper.rb 中的辅助方法（匹配 class 名称或应用程序，如果站点范围广）：

def classy(question, index)
  if index == 0
    "tab-pane fade active show"
  else
    "tab-pane fade"
  end
end

在我们进行此操作的同时，让我们从视图中获取演示文稿标记。在您的 CSS 文件中：

.tab-pane.fade {
  height: 444px;
  overflow-y: auto;
}

如果您想要实现不同的目标，请告诉我们。这是我根据阅读问题和代码得出的最佳猜测。

Answer 3

在 Ruby 中，您可以使用 Enumerable#each_with_index 循环访问具有索引的集合：

<% @question.each_with_index do |value, index| %>

<% end %>

<% end %>

一般来说，在 Ruby 中，如果您使用 .each 或任何带有外部变异变量的迭代器，那您就错了。

您还可以使用 content_tag:

清理视图

<% @question.each_with_index do |value, index| %>
  <% 
      classes = ["tab-pane", "fade"] 
      classes = classes + ["active", "show"] if index == 0
  %>
  <%= content_tag :div, class: classes, id: "question#{index+1}" do %>

  <% end %>
<% end %>

如果您只是加入类:

的数组，则可以将相同的方法用于直接 ERB 插值

<div class="<%= classes.join(" ")%>" ...

Class html.erb 文件中的名称分隔

Class name in html.erb file separated

html

ruby-on-rails

erb

twitter-bootstrap