Имя класса в файле html.erb разделено - PullRequest
Новая
       7

Имя класса в файле html.erb разделено

0 голосов
/ 10 ноября 2018

У меня есть оператор 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}"%>>

Но когда я просмотрел html в chrome inspect, он не включается как непрерывная строка, а вместо этого отделяется, когда есть место. Вроде таких: 

class= "tab-pane" fade active show

но я хочу, чтобы это было 

class = "tab-pane fade active show"

Я пробовал <div class=<%=#{var_class} %> и <div class=<%="var_class" %> и их производные. Может кто-нибудь помочь?

Ответы [ 3 ]

0 голосов
/ 10 ноября 2018

Ответ Мессии - его основа. Без кавычек вокруг строки DOM останавливает классы, когда попадает в пробел. Он считает, что другие элементы являются атрибутами тега div.

В соответствии с рекомендациями, мы обычно хотим избегать локальных присваиваний (где вы устанавливаете переменную) в представлении rails. Это действительно хочет быть помощником или декоратором (если вам действительно нужен этот уровень функциональности и тестируемости).

[Ниже приведен псевдокод, который я не тестировал, поэтому возможны незначительные ошибки]

В вашем представлении ERB: 

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

Я бы посоветовал найти более семантический тег HTML, чем div, если это возможно. Итераторы (.each), как правило, представляют собой список объектов, поэтому, возможно, лучшим выбором будет UL (неупорядоченный список) или OL (упорядоченный список) с LI внутри. UL дают вам кнопки, а OL дают номера по умолчанию, но их можно изменить.

Вы также, вероятно, хотите избежать знака # в имени идентификатора, так как вы бы назвали идентификатор в css-файле с помощью #name. Так что # 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;
}

Если вы пытаетесь достичь чего-то другого, дайте нам знать. Это было мое лучшее предположение, основанное на прочтении вопроса и кода.

0 голосов
/ 10 ноября 2018

В 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(" ")%>" ...
0 голосов
/ 10 ноября 2018

Я думаю, что вам не хватает кавычек атрибутов class и id. 

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