在模板中使用 Integer.is_even(count)

Question

我自定义 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？
是否有 better/easier/cleaner 方法在“bg-gray-50”和“bg-white”之间迭代 bg_color 的值？

Answer 1

<% 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

Answer 2

我对 tailwindcss 不是很熟悉，但这通常可以完全通过 CSS.

在我看来，tailwindcss 确实支持 "even-child" variant。

所以我想在对你的 tailwind 配置进行一些小的调整后，你可以给你所有的 div 相同 class（我相信 CSS 子索引从 1 开始，所以我正在翻转什么是“偶数”）：

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

在模板中使用 Integer.is_even(count)

Use Integer.is_even(count) in a template

elixir

phoenix-framework