Phoenix可复用模板

如果你使用过React或者Vue这类流行的前端框架，你会对可复用模板/组件的概念感到熟悉。实际上，在Phoenix中，我们也可以使用View和eex构建可复用模板，当然咯，状态流和数据流监听什么的还做不到，但是对于Dumb Components来说，很大一部分可以搞定。

我们来看一下一个基本的模板。

<Tabs>
  <Tab name="All Products" />
  <Tab name="Featured" />
</Tabs>

这样的好处是，当你需要修改Tabs或Tabs时，你只需要修改一处地方，然后整个应用的模板都会修改了。

在Phoenix中，我们可以实现这个功能。

1. 创建 ComponentView 和 templates/component 目录

defmodule MyApp.Web.ComponentView do
  use MyApp.Web, :view
end

2. 定义 Component 的模板

<!-- templates/component/tabs.html -->
<ul class="tabs">
  <%= assigns[:do] %>
</ul>

<!-- templates/component/tab.html -->
<li class="tab"><%= assigns[:name] %></li>

3. 当你需要tabs时使用这些模板

<%= render ComponentView, "tabs.html" do %>
  <%= render ComponentView, "tab.html", name: "All Products" %>
  <%= render ComponentView, "tab.html", name: "Featured" %>
<% end %>

目前，它能工作，但是比较冗余，我们来增加 ComponentHelpers 模块

# views/component_helpers.ex
defmodule MyApp.Web.ComponentHelpers do
  def component(template, assigns) do
    MyApp.Web.ComponentView.render(template, assigns)
  end
  
  def component(template, assigns, do: block) do
    MyApp.Web.ComponentView.render(template, Keyword.merge(assigns, [do: block]))
  end
end

然后，在 MyApp.Web 的 view 模块中导入

def view do
  quote do
    # ...
    import MyApp.Web.ComponentHelpers
  end
end

现在的 markup 变为了

<%= component "tabs.html" do %>
  <%= component "tab.html", name: "All Products" %>
  <%= component "tab.html", name: "Featured" %>
<% end %>

你还可以将它继续精简

<%= c "tabs.html" do %>
  <%= c "tab.html", name: "All Products" %>
  <%= c "tab.html", name: "Featured" %>
<% end %>

它虽然没有像React那样精简，但是也差不多了

<Tabs>
  <Tab name="All Products" />
  <Tab name="Featured" />
</Tabs>

这只是一个非常简单的示例，并不需要花很大力气，当你需要使用复杂的 markup 时，你可以考虑这种方式。

Ref

http://blog.danielberkompas.com/2017/01/17/reusable-templates-in-phoenix.html