Блог

Я настраиваю phx.gen.html шаблон для использования TailwindCSS. В :show шаблоне я использую этот код:

 <%= for {{k, _}, counter} <- Enum.with_index(schema.attrs) do %>
  <% bg_color = if Integer.is_even(counter), do: "bg-gray-50", else: "bg-white" %>
  <div class="<%= bg_color %>">
    [...]
  </div>
<% end %>
 

Запуск генератора приводит к появлению этого сообщения об ошибке:

 ** (CompileError) ./priv/templates/tailwind.gen.html/show.html.eex:10: 
you must require Integer before invoking the macro Integer.is_even/1
    (elixir 1.11.2) expanding macro: Kernel.if/2
    ./priv/templates/tailwind.gen.html/show.html.eex:10: (file)
 

В Integer.is_even(counter) том-то и проблема.

• Как я могу требовать Integer здесь?
• Есть ли лучший / более простой / чистый способ итерации значения bg_color между «bg-gray-50» и «bg-white»?

Я не очень хорошо знаком с tailwindcss, но обычно это можно сделать исключительно с помощью CSS.

Мне кажется, что tailwindcss поддерживает «четный дочерний» вариант.

Так что я бы предположил, что после небольшой настройки вашей конфигурации tailwind вы могли бы просто присвоить всем своим divs один и тот же класс (я считаю, что дочерние индексы CSS начинаются с 1, поэтому я переворачиваю то, что «четно»):

 <%= for {k, _} <- schema.attrs do %>
  <div class="bg-gray-50 even:bg-white">
    [...]
  </div>
<% end %>
 

 <% require Integer %>
<%= for {{k, _}, counter} <- Enum.with_index(schema.attrs) do %>
  <% bg_color = if Integer.is_even(counter), do: "bg-gray-50", else: "bg-white" %>
  <div class="<%= bg_color %>">
    [...]
  </div>
<% end %>
 

Спасибо @aleksei-matiushkin