如何将 html 代码从组件函数移动到 html/heex 部分？

Question

假设我有这样的东西：

    defmodule MyAppWeb.Live.PostComponents do
      use Phoenix.Component
      use Phoenix.HTML

      def card(assigns) do
        ~H"""
        <div class="row ....">
            <nav class="......"></nav>
            <%= live_redirect "...", to: @content.slug, class: "stretched-link" %>
          <%= if  do %>
            blah-blah-blah-blah-blah-blah
          <% end %>
        </div>
        """
      end

如何将此代码移动到 html 或 *.heex 文件中，然后以某种方式调用 render(....) ？ 最终结果必须保持不变。

Answer 1

您可以使用

*.html.heex

将

embed_templates/1

文件嵌入到功能组件中 请参阅此处的 LiveView 文档。

模板代码可以放入

card.html.heex

文件中（按照惯例，模板文件可以移动到模块附近的单独目录，例如

/pages/card.html.heex

。然后在

MyAppWeb.Live.PostComponents

中，您可以在模块级别调用

embed_templates/1

）模板文件夹的路径作为参数，并且

MyAppWeb.Live.PostComponents

将定义一个函数组件

card

。

defmodule MyAppWeb.Live.PostComponents do
  use Phoenix.Component

  embed_templates "pages/*.html.heex"
end

# somewhere else in another template of render function
~H"""
...
<MyAppWeb.Live.PostComponents.card ... >
  ...
<./MyAppWeb.Live.PostComponents.card>
...
"""

有关像这样嵌入的函数组件的声明式分配的更多信息，请参阅

embed_templates/1

文档。