sodapopcan

sodapopcan

Dynamically render Surface components

Is there a nice way to dynamically render a Surface component? I actually don’t even really figure out a non-nice way atm.

I current have a main Page which contains the layout and I want to dynamically render content which would be components.

defmodule AppWeb do
  use Surface.LiveView

  data section, :string, default: "home"

  def render(assigns) do
    ~H"""
    <div>
      <header><h1>header</h1></header>
      <main>
        <!-- Is it possible to render a component based on the `section` data attribute here? -->
      </main>
    </div>
    """
  end

  def handle_params(%{"section" => section}, _, socket} do
    # Do some validation here to ensure `section` section is valid

    {:noreply, assign(:section, section)}
  end
end

Is there a better way of dong this? My first attempt involved having a Layout component with a slot, then each section is its own LiveView, but that felt a little heavy-handed. Each section is rich enough that I want them to be their own components, but not heavy enough that they warrant loading a new LiveView each time.

I feel like I’m missing something really obvious, but my focus is being pulled in all different directions in the past couple of weeks.

Thanks!

First Post!

sodapopcan

sodapopcan

So, reading through the source of LiveDashboard I’ve come up with something.

Essentially:

defmodule AppWeb do
  use Surface.LiveView

  data page, :string

  def render(assigns) do
    ~H"""
    <div>
      <header><h1>header</h1></header>
      <main>
        {{ @page.render(assigns) }}
      </main>
    </div>
    """
  end

  def handle_params(%{"page" => page}, _, socket} do
    {:noreply, assign(:page, resolve_page(page))}
  end

  def handle_params(_, _, socket) do
    {:noreply, assign(:page, AppWeb.Pages.Home)}
  end

  defp resolve_page("foo"), do: AppWeb.Pages.Foo
  defp resolve_page("bar"), do: AppWeb.Pages.Bar
end

Where Next?

Popular in Questions Top

marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
joeerl
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
freewebwithme
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
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
lanycrost
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
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New

Other popular topics Top

albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 43591 214
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
RisingFromAshes
I've read in another post that it may be possible with a router helper - but I couldn't find an appropriate one, and tbh, I'm still just ...
New
rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list....
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New
hariharasudhan94
Lets say i have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; "XX...
New
lanycrost
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

We're in Beta

About us Mission Statement