html.erb 文件中的类名分隔答案

【问题标题】：Class name in html.erb file separatedhtml.erb 文件中的类名分隔
【发布时间】：2019-04-13 18:11:56
【问题描述】：

我在循环中有一个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" %> 及其衍生产品。有人可以帮忙吗？

【问题讨论】：

标签： html ruby-on-rails twitter-bootstrap erb

【解决方案1】：

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

【讨论】：

【解决方案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 为您提供按钮，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 中的辅助方法（如果站点范围与类名或应用程序匹配）：

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;
}

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

【讨论】：

【解决方案3】：

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

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

【讨论】：