单引号导致LiveView模板处理错误

Question

我想在我的菲尼克斯LiveView模板中使用以下Tainwind类：

<div class="before:content-['Not_Hovering'] hover:before:content-['Hovering']">
  <!-- ... -->
</div>

但是单引号没有正确处理，导致以下错误：

no function clause matching in Phoenix.LiveView.Engine.analyze_list/4

    The following arguments were given to Phoenix.LiveView.Engine.analyze_list/4:
    
        # 1
        "'"
    
        # 2
        {:restricted, %{}}
    
        # 3
        %{[:default_avatar] => true, [:groups] => true, [:myself] => true}
    
        # 4
        ["before:content-[", []]
    
    Attempted function clauses (showing 2 out of 2):
    
        defp analyze_list([31m[head | tail][0m, [22mvars[0m, [22massigns[0m, [22macc[0m)
        defp analyze_list([31m[][0m, [22mvars[0m, [22massigns[0m, [22macc[0m)

如何在LiveView模板的类字符串中使用单引号，以便我可以使用这些Tailwind类？

Answer 1

可以通过使用sigil而不是通常的二进制字符串来解决这个问题：

<div class={~s"before:content-['Not_Hovering'] hover:before:content-['Hovering']"}>
  <!-- ... -->
</div>