# Phoenix 视图和模板 Phoenix 使用 HEEx (HTML+EEx) 模板来呈现动态 HTML 内容。 HEEx 提供编译时验证、自动转义的安全性以及基于组件的架构。 Phoenix 中的视图是组织模板渲染逻辑并容纳可重用功能组件的模块。 ## 查看模块结构 Phoenix 视图模块使用“embed_templates”宏从目录加载 HEEx 模板： defmodule HelloWeb.HelloHTML 做使用HelloWeb，：html embed_templates“hello_html/*” 结束这会自动为“hello_html/”目录中的每个“.html.heex”文件创建函数。 ## HEEx 模板 ### 基本模板结构 HEEx 模板将 HTML 与嵌入的 Elixir 表达式相结合： <部分>

你好，世界，来自凤凰城！

### 插入动态内容使用 `<%= ... %>` 将 Elixir 表达式插入 HTML： <部分>

Hello World，来自<%= @messenger %>！

“@”符号访问从控制器传递的分配。 ### 多行表达式对于没有输出的表达式，省略`=`： <%#这是一条评论%> <% user_name = String.upcase(@user.name) %>

欢迎，<%= user_name %>！

## 使用分配分配是从控制器传递到模板的键值对： # 控制器 def show(conn, %{"messenger" => Messenger}) 做渲染（conn，：show，信使：信使，接收者：“Dweezil”）结束 <部分>

您好<%= @receiver %>，来自<%= @messenger %>！

所有分配都可以在模板中使用“@”前缀进行访问。 ## 条件渲染 ### 使用 if/else HEEx 支持使用“if/else”块进行条件渲染： <%= if some_condition?做％>

某些条件对于用户来说成立：<%= @username %>

<%其他%>

某些条件对于用户来说是错误的：<%= @username %>

<％结束％> ### 使用除非对于负面条件： <%= 除非@user.premium %>

升级到高级版以获得更多功能！

<％结束％> ### 模式与大小写匹配对于多个条件： <%= 案例 @status 执行 %> <% :待处理 -> %> 待处理 <% : 已批准 -> %> 已批准 <% :拒绝 -> %> 已拒绝 <％结束％> ## 循环和迭代 ### 对于理解使用“for”生成动态列表： <表> 数量电源 <%= 对于数字 <- 1..10 做 %> <%=数字%> <%=数字*数字%> <％结束％> ### 迭代集合循环列表或地图：

<%= post.title %>

<%= post.摘录%>

### 速记：属性 HEEx 为简单迭代提供了更清晰的语法：

<%= item.name %>

### 访问索引使用“Enum.with_index/2”获取迭代索引： <%= for {item, index} <- Enum.with_index(@items) do %>

<%= 项目.名称 %>

<％结束％> ## 功能组件函数组件是可重用的 UI 元素，定义为返回 HEEx 模板的 Elixir 函数。 ### 定义函数组件使用“attr”宏来声明模板的属性和“~H”标志： defmodule HelloWeb.HelloHTML 做使用HelloWeb，：html embed_templates“hello_html/*” attr ：信使，：字符串，必需：true def 问候（分配）做〜H“”“

Hello World，来自<%= @messenger %>！

”“” 结束结束 ### 使用函数组件使用“<.component_name />”语法调用组件： <部分> <.greet 信使={@messenger} /> ### 具有默认值的可选属性定义具有默认值的可选属性： attr :messenger, :string, 默认值: nil attr :class, :string, 默认值：“问候语” def 问候（分配）做〜H“”“ 你好世界<%= 如果@messenger, do: ", from #{@messenger}" %>! ”“” 结束 ### 多种属性类型组件可以接受各种属性类型： attr ：标题，：字符串，必需：true attr ：计数，：整数，默认：0 attr :active, :boolean, 默认值: false attr ：用户，：地图，必需：true attr :items, :list, 默认值: [] def 卡（分配）做〜H“”“

if @active, do: " active", else: ""}>

<%= @title %>

计数：<%= @count %>

用户：<%= @user.name %>

<%= item %>

”“” 结束 ### 具有计算值的组件使用“assign/2”计算组件内的值：属性：x，：整数，必需：true 属性：y，：整数，必需：true attr ：标题，：字符串，必需：true def sum_component(分配) 做分配 = 分配（分配，总和：分配.x + 分配.y）〜H“”“

<%= @title %>

总和：<%= @sum %>

”“” 结束 ## 老虎机槽允许组件接受内容块，从而实现强大的组合模式。 ### 定义和使用槽定义一个槽并渲染它：插槽：inner_block，必需：true def 卡（分配）做〜H“”“ <%= render_slot(@inner_block) %> ”“” 结束使用带有内容的组件： <.卡片>

卡片标题

此处显示卡片内容

### 命名插槽组件可以有多个命名槽：槽：标头，必需：true 槽：body，必需：true 插槽：页脚 def 面板（分配）执行〜H“”“

<%= render_slot(@header) %>

<%= render_slot(@body) %>

<%= if @footer != [] do %>

<%= render_slot(@footer) %>

<％结束％>

”“” 结束用途： <.面板> <:标题>

面板标题

<：正文>

面板内容

<：页脚> <按钮>关闭 ### 具有属性的插槽插槽可以接受更动态渲染的属性：插槽：项目，必需：true attr ：标题，：字符串，必需：true attr :突出显示, :boolean, 默认值: false 结束 def 列表（分配）做〜H“”“

<%= item.title %>: <%= render_slot(item) %>

”“” 结束 ## 渲染子模板 ### 渲染其他模板在父模板中包含子模板： <%= render("child_template.html", 分配) %> ### 渲染其他模块的组件从不同模块调用组件：或者使用别名：别名 MyApp.Components # 在模板中： ## 布局模板 ### 使用布局布局包裹渲染的模板。在控制器中配置布局： def 控制器做引用做使用 Phoenix.Controller，格式：[:html, :json], 布局：[html：HelloWeb.Layouts] ... 结束结束 ### 根布局根布局包含 `@inner_content` 占位符： <头> <元字符集=“utf-8”/> <标题>我的应用程序 <正文> <%= @inner_content %> ### 应用布局组件使用组件嵌套布局： <部分>

Hello World，来自<%= @messenger %>！

### 禁用布局没有布局的渲染： def home(conn, _params) 做渲染（conn，：home，布局：false）结束 ## 实时查看集成 ### 委托给 Phoenix Views LiveView 可以将渲染委托给现有视图模块： defmodule AppWeb.ThermostatLive 做使用 Phoenix.LiveView def 渲染（分配）做 Phoenix.View.render(AppWeb.PageView, "page.html", 分配) 结束结束 ### 在模板中嵌入 LiveView 在静态模板中渲染 LiveView 组件：

温度控制

<%= live_render(@conn, AppWeb.ThermostatLive) %> ### LiveView 中的功能组件在LiveView中定义和使用功能组件： def Weather_greeting(分配) 做〜H“”“

你好<%= @name %>

”“” 结束 ## 测试视图 ### 测试视图渲染直接使用“render_to_string/4”测试视图： defmodule HelloWeb.ErrorHTMLTest 做使用 HelloWeb.ConnCase，async: true 导入 Phoenix.Template 测试“渲染 404.html” 断言 render_to_string(HelloWeb.ErrorHTML, "404", "html", []) == "未找到" 结束测试“渲染 500.html” 断言 render_to_string(HelloWeb.ErrorHTML, "500", "html", []) == "内部服务器错误" 结束结束 ### 测试函数组件隔离测试组件：导入 Phoenix.LiveViewTest 测试“渲染问候组件” 分配 = %{messenger: "Phoenix"} html = render_to_string(~H""" “””）断言 html =~“你好，世界，来自凤凰城！” 结束 ## 何时使用此技能当您需要执行以下操作时，请使用此技能： 1.为Phoenix应用程序创建动态HTML模板 2. 构建可重用的功能组件以实现一致的 UI 元素 3.根据应用程序状态实现条件渲染 4. 使用动态数据渲染列表和表格 5. 使用嵌套组件和插槽创建复杂布局 6.将LiveView组件与静态模板集成 7. 测试视图渲染逻辑和组件行为 8. 构建可访问且语义化的 HTML 结构 9. 使用动态类实现响应式设计 10. 创建带有验证反馈的表单 11.显示闪现消息和用户通知 12. 渲染导航菜单和面包屑 13. 构建基于卡片的布局和仪表板 14. 实现分页控件 ## 最佳实践 1. **使用功能组件** \- 将可重用的UI模式封装在组件中 2. **显式声明属性** \- 对所有组件属性使用 `attr` 宏 3. **提供默认值** \- 通过合理的默认值使组件变得灵活 4. **使用语义 HTML** \- 选择适当的 HTML 元素以实现可访问性 5. **杠杆槽** \- 使用槽进行灵活的组件组合 6. **保持模板简单** \- 将复杂的逻辑移至控制器或上下文 7. **使用 :for 简写** \- 更喜欢 `:for` 属性进行简单迭代 8. **避免内联样式** \- 使用 CSS 类进行样式设置 9. **测试组件** \- 为复杂的组件逻辑编写测试 10. **文档组件** \- 添加文档字符串来解释组件用法 11. **使用经过验证的路线** \- 始终在模板中使用 `~p` 标志 12. **转义用户内容** \- 让 HEEx 自动处理转义 13. **优化渲染** \- 最小化模板代码中的计算 14. **使用描述性名称** \- 清楚地命名组件和属性 15. **遵循约定** \- 坚持 Phoenix 命名模式 ## 常见陷阱 1. **将逻辑放入模板** \- 复杂的业务逻辑属于上下文，而不是视图 2. **不转义 HTML** \- 使用 `raw/1` 而不清理用户输入 3. **深度嵌套模板** \- 创建难以维护的模板层次结构 4. **缺少属性声明** \- 未对组件属性使用 `attr` 宏 5. **过度使用内联条件** \- 使模板难以阅读 6. **不使用组件** \- 重复标记而不是提取组件 7. **忘记插槽检查** \- 不检查是否提供了可选插槽 8. **混合关注点** \- 将数据获取与表示逻辑相结合 9. **大型模板文件** \- 创建整体模板而不是组件 10. **格式不一致** \- 不遵循 HEEx 格式约定 11. **使用 EEx 而不是 HEEx** \- 缺少编译时验证的好处 12. **忽略可访问性** \- 不添加 ARIA 标签和语义标记 13. **硬编码值** \- 不使用可配置内容的分配 14. **不测试边缘情况** \- 缺少 nil 检查和空状态处理 15. **过度嵌套** \- 创建深度嵌套的组件树 ## 资源 * [Phoenix 组件指南]() * [Phoenix.Component 文档]() * [HEEx 模板引擎]() * [Phoenix 模板指南]() * [Phoenix 视图文档]() * [Phoenix LiveView 文档]()

你好，世界，来自凤凰城！

Hello World，来自<%= @messenger %>！

您好<%= @receiver %>，来自<%= @messenger %>！

<%= post.title %>

Hello World，来自<%= @messenger %>！

<%= @title %>

<%= @title %>

卡片标题

面板标题

Hello World，来自<%= @messenger %>！

温度控制

凤凰城景观模板

包含技能