Rendering from templates
The beauty of Phlex components is that they can be rendered within your existing ERB, Haml, or Slim templates, making it possible to incrementally introduce Phlex into your application without requiring a complete rewrite.
Rendering Phlex from existing templates
Letβs explore how to integrate Phlex components into your existing template system. Consider a Components::Card
component that you want to use across different template formats.
Erb template
In an ERB template, you can render the component like this:
<%= render Components::Card.new do |c| %>
<%= c.title do %>
Hello, World!
<% end %>
<%= c.body do %>
This is the body of the card.
<% end %>
<% end %>
Haml template
π Unlock content
Pre-order this course to unlock this video, source code, and content. You'll also get to work with Brad to fine tune the course cirriculum.
ββ β ββββ βββββββββ βββ ββββββ ββ ββββββββ βββββββββ βββ βββββββ ββββββββββββββββ
= ββββββ ββββββββββ::ββββ.βββ do |β|
= β.βββββ do
Hello, World!
= β.ββββ do
This is the body of the card.
Slim template
βββ ββββ ββββββββββ βββ ββββββ βββββββ β βββββββ ββββββββ
= ββββββ ββββββββββ::ββββ.βββ do |β|
= β.βββββ do
βββββ, World!
= β.ββββ do
ββββ is the body of the card.
Rendering partials and templates from Phlex components
βββββ ββββββββββ βββ ββββ ββββββ ββββββββ βββββ ββββββββ βββ ββββββββββ βββββββββ βββββββ ββββββ βββ βββββββ ββββββββββ ββββ ββββββββ ββββββ βββ ββ βββββββββββββ βββββββ ββββ βββββββββ ββ βββββ βββββ βββββββββββ ββββββββ ββββββββββββββ
Rendering partials
βββ βββ ββββββ βββββ ββββββββ ββββ ββββββ βββββ ββββββββββ βββββ βββ ββββββ βββββββ
class Components::UserProfile < ββββββββββ::ββββ
def ββββββββββ(ββββ)
βββββ = ββββ
end
def βββββββββββββ
βββ(class: "user-profile") do
ββ { "User Profile" }
β ββββββ ββ ββββββββ βββββ βββββββ
ββββββ partial: "users/avatar", locals: { user: βββββ }
β ββββββββ ββββ βββββ ββββββββββ
ββββββ ββββββββββ::βββββββββββ.βββ(βββββ)
end
end
end
ββββ ββββββββ βββββ ββββ ββββ βββ ββββ βββββββ ββββββββ ββββ ββββββ βββββ ββ ββ βββββββββ ββ βββββ ββββββββββ ββββ
Rendering templates
ββββββββββ βββ βββ ββββββ ββββββββ ββββββββ βββββ ββββ ββββββ βββββ βββββββββββ
class Views::Dashboard < βββββ::ββββ
def βββββββββββββ
βββ(class: "dashboard") do
ββββββ ββββββββββ::ββββββ.βββ
β ββββββ ββ ββββββββ ββββββββ ββββ
ββββββ template: "shared/legacy_widget"
βββ(class: "modern-section") do
ββββββ ββββββββββ::βββββββββββ.βββ
end
end
end
end
Migration strategy
ββββ βββββ ββββ βββββ βββββββββ ββββββββ ββ β ββββββββ βββββ ββββββ ββββ β βββββββββ βββββββββ βββ ββββ ββββββ ββ ββ βββββββββ βββββββ ββββββββ βββ βββββββββ ββ βββββ ββββββββββ ββ ββββ βββ ββββ ββββββββ βββ
- ββββββ βββββββββββ βββββββ ββββββ ββββββββββ
- ββββ ββββββ βββ ββββββββββββ βββββ ββββββββ
- ββββββββ βββββββββββββββ βββββββ ββββββ βββββββββββββ
- ββββββββ βββββββ ββββββββββββ
βββββ ββ ββββββββββ βββ ββββββββ ββββββββ ββββββ ββββ ββββ ββββ βββ ββ ββ ββββ βββββββ βββββββββ ββ ββββ ββββ βββββββ βββββββββββ ββββ βββββ βββββββββ