在 LiveView 中以編程方式組成 ~H 印記

Question

如何用變量填充部分或整個〜H sigil？ 我正在嘗試使用它將一些現有的 html 表格標記插入 Liveview 頁面。 我嘗試了以下方法，但它們導致頁面上出現“#{html_codes}”或“...”之類的文本，而不是在 Liveview 頁面上插入表格。 如果有更好的方法可以在 LiveView 頁面中插入任意 html 代碼，我會全力以赴。

html_codes = """
  <table> .... </table>
"""

~H"""
   #{html_codes} or <%= html_codes %>
"""

Answer 1

從 Elixir Slack 頻道收到了以下提示，並且成功了。

~H"""
<% = Phoenix.HTML.raw(html_codes) %>
"""

Answer 2

你需要做三件事：

1. 確保您嘗試包含的變量使用~H語法

   html_codes = ~H""" <table> .... </table> """

2. 確保值在assigns變量中

   assigns = assign(assigns, html_codes: html_codes)

3. 在模板中，使用@assign_name語法引用值

   ~H""" <div><p>Here's a table:</p><%= @html_codes %></div> """

無論您是在render/1回調、函數組件還是單獨的*.heex文件中，相同的語法都應該有效。