kevinlang
Rendering live component to HTML
If I have a simple component:
defmodule MyComponent do
use Phoenix.Component
def greet(assigns) do
~H"""
<p>Hello, <%= @name %>!</p>
"""
end
end
How do I render that component to HTML? If I call it with MyComponent.greet("kevin"), I get:
%Phoenix.LiveView.Rendered{
static: ["<p>Hello, ", "!</p>"],
dynamic: #Function<0.16019880/1 in MyComponent.greet/1>,
fingerprint: 308466332634811005649600859994209728577,
root: true,
caller: :not_available
}
How do I turn that Phoenix.LiveView.Rendered into HTML? I.e., I want to get the following string, but can’t figure out how:
"<p>Hello, kevin!</p>"
I ask because I am thinking of using my existing component when I do preprocessing of markdown templates, so I can just inject the HTML into the markdown template verbatim and then run it through the markdown processor. I think this is cleaner and easier to reason about than doing AST manipulations.
Marked As Solved
c4710n
Phoenix.LiveView.Rendered implements the Phoenix.HTML.Safe protocol, so you can do it like this:
MyComponent.greet(%{name: "hello"})
|> Phoenix.HTML.Safe.to_iodata()
|> to_string()
References:
7
Also Liked
03juan
If the Markdown processor handles iodata, there’s even no need to convert to string.
1
Popular in Questions
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
Hi,
I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
Hi,
I'm quite new in Elixir and I'm trying to format a string to a PEM format. I have the certificate value like MIIDBTCCAe2...... and ...
New
Using vs code and installed ElixirLS: support and debugger.
And I got an error popped up on start up says
Failed to run ‘elixir’ comma...
New
Hi guys, i’m new in the Elixir world, and i have to say, that i love it!
i’m having some problem to understand anonymous functions with ...
New
Hi!
In PHP: $SERVER['SERVERADDR'] - in Elixir?
Searched the docs for ip address and the web, no good results.
Thanks!
New
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I'm a nov...
New
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
Other popular topics
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible.
total = 10
while total != 0
...
New
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors:
[WARN] - (starship::utils): Executing command ...
New
Hey,
Just curious what are the main benefits of Elixir compared to Clojure?
When is Elixir more useful than Clojure and vice versa?
Th...
New
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? https://hexdocs.pm/ecto/Ecto.Repo.h...
New
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
Using vs code and installed ElixirLS: support and debugger.
And I got an error popped up on start up says
Failed to run ‘elixir’ comma...
New
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New
Hi everyone!
I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New








