Templates and Views in Phoenix Elixir

What You’ll Learn 📚

• Understand the core concepts of templates and views in Phoenix Elixir
• Learn key terminology with friendly definitions
• Explore simple to complex examples with step-by-step explanations
• Get answers to common questions and troubleshoot issues

Introduction to Templates and Views

In Phoenix, a popular web framework for Elixir, templates and views are essential components for rendering dynamic web pages. They work together to separate the logic of your application from the presentation layer, making your code cleaner and more maintainable.

Key Terminology

• Template: A file that contains HTML and embedded Elixir code, used to generate dynamic content.
• View: A module that prepares data for the template, often by formatting or transforming it.

Getting Started: The Simplest Example

Let’s start with a basic example to see how templates and views work together.

# In your Phoenix project, create a new template file: lib/my_app_web/templates/page/hello.html.eex
Hello, <%= @name %>!

# In the corresponding view module: lib/my_app_web/views/page_view.ex
defmodule MyAppWeb.PageView do
  use MyAppWeb, :view
end

Running the Example

To see this in action, you’ll need to set up a route and a controller action:

# In lib/my_app_web/controllers/page_controller.ex
defmodule MyAppWeb.PageController do
  use MyAppWeb, :controller

  def hello(conn, _params) do
    render(conn, "hello.html", name: "Phoenix")
  end
end

Expected Output

Progressively Complex Examples

Example 1: Passing Multiple Variables

Let’s enhance our template to accept more data.

# Update the template: lib/my_app_web/templates/page/hello.html.eex
Hello, <%= @name %>!
Welcome to <%= @platform %>.

# Update the controller action:
def hello(conn, _params) do
  render(conn, "hello.html", name: "Phoenix", platform: "Elixir")
end

Example 2: Using Conditional Logic

Templates can also include logic to conditionally display content.

# Update the template:
<% if @name == "Phoenix" do %>
  
You're using the Phoenix framework!
<% else %>
  
Welcome, <%= @name %>!
<% end %>

Example 3: Iterating Over Lists

You can iterate over lists to display multiple items.

# Update the template:

<% for item <- @items do %>
  
<%= item %>
<% end %>

# Update the controller action:
def hello(conn, _params) do
  render(conn, "hello.html", items: ["Elixir", "Phoenix", "Ecto"])
end

Common Questions and Answers

1. What is the difference between a template and a view?

   A template is a file that contains HTML and embedded Elixir code, while a view is a module that prepares data for the template.

2. How do I pass data to a template?

   Data is passed to a template through the render function in a controller action.

3. Can I use logic in templates?

   Yes, you can use Elixir logic such as conditionals and loops in templates.

4. Why is my template not rendering?

   Ensure the template file exists and is named correctly, and that the controller action is calling render with the correct template name.

Troubleshooting Common Issues

If you encounter a “template not found” error, double-check the file path and name, as well as the module and function names in your controller.

Remember, templates are stored in the lib/my_app_web/templates directory, and views are in lib/my_app_web/views.

Practice Exercises

• Create a new template that displays a personalized message based on user input.
• Experiment with adding a list of items and rendering them in a table format.
• Try using a conditional statement to display different messages based on the time of day.

For more information, check out the official Phoenix documentation on templates.

Keep practicing and experimenting with different scenarios. You’ve got this! 💪