html.erb文件中的类名分隔

Question

我在循环内有一个if语句，可以为类名更改变量（名为var_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 inspect中查看html时，它不包含为连续字符串，而是在有空间时分隔开。 像这样：

class= "tab-pane" fade active show

但我希望它成为

class = "tab-pane fade active show"

我试过<div class=<%=#{var_class} %>和<div class=<%="var_class" %>及其派生方式。 有人可以帮忙吗？

Answer 1

我认为您缺少类和id属性的引号。

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

Answer 2

弥赛亚的答案是最基本的。 如果字符串两端没有引号，则DOM碰到空格时会停止类。 它认为其他项目是div标签上的属性。

在最佳实践中，我们通常希望避免在Rails视图中进行局部分配（在其中设置变量）。 这确实想成为帮助者或装饰者（如果您确实需要该级别的功能和可测试性）。

[以下是我尚未测试的伪代码，因此可能存在一些小错误]

在您的ERB视图中：

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

我建议，如果可能的话，找到比div更语义的HTML标记。 迭代器（.each）往往是对象列表，因此也许在内部带有LI的UL（无序列表）或OL（有序列表）可能是更好的选择。 UL默认为您提供按钮，而OLs默认为您提供数字，但是可以更改。

您可能还希望避免在ID名称中使用＃号，因为您将在具有#name的CSS文件中调用ID。 因此，＃name＃2在DOM中可能会给您带来一些意想不到的混乱结果。 您可能希望将each_ with _index一起使用以获取数组和索引值。 很好地解释了这里的区别： 在Ruby中遍历数组的“正确”方法是什么？

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

what_helper.rb中的帮助程序方法（如果站点范围内，则与类名或应用程序匹配）：

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(" ")%>" ...