.heex 中的错误嵌套

Question

在将旧 .eex 转换为 .heex 时，我偶然发现了这段代码，它使用 TailwindCSS 显示斑马样式 table 行：

<%= for {language, counter} <- Enum.with_index(@languages) do %>
  <tr class="<%= if rem(counter, 2) == 0, do: "bg-white", else: "bg-gray-50" %>">

在运行 mix format

时导致此错误

$ mix format
mix format failed for file: lib/w_games_web/templates/language/index.html.heex
** (Phoenix.LiveView.HTMLTokenizer.ParseError) nofile:2:14: expected closing `"` for attribute value

我有点理解这个问题，但我不理解。

我该如何解决这个问题？
有没有better/cleaner的方法可以达到想要的斑马码效果？

Answer 1

使用 HEEx，HTML 属性必须以这种方式生成：

<tr class={if rem(counter, 2) == 0, do: "bg-white", else: "bg-gray-50"}>

简而言之，attr="<%= value %>" (EEx) 变为 attr={value} (HEEx)。

注意：您可以使用 CSS(3) 来替换颜色 (:nth-child(odd/even)) 并使用 Elixir

中的 Integer.is_odd/even/1 守卫

.heex 中的错误嵌套

Faulty nesting in .heex

elixir

phoenix-framework