Flo0807

Flo0807

LiveView - Add `:else`-like special attribute

Hello everyone!

Phoenix LiveView v0.18 introduced the special attributes :let, :for and :if. In addition to the :if special attribute, I’d like to see an :else-like attribute.

The :if attribute is very useful for conditionally rendering blocks, but hiding a block is often accompanied by showing another block.

See the following example, which displays a message based on a user’s role:

<p :if={@role == :admin}>Hello Admin</p>
<p :if={@role != :admin}>Hello other roles!</p>

As you can see, the second :if is defined as the opposite of the first :if. This allows us to display a fallback block in case the user is not an admin. But showing a fallback block is a common use case, so let us add a special :else attribute that can be used to show such blocks:

<p :if={@role == :admin}>Hello Admin</p>
<p :else>Hello other roles!</p>

In the above example, the second block is being displayed when the :if in the first block evaluates to false.

This is not an entirely new idea. For example, Vue has a v-else directive and Svelte also has a {:else}.

Most Liked

sodapopcan

sodapopcan

I’ve wanted this before but my general thoughts are:

  • If it’s a simple check with short blocks I don’t mind the negation, as in your example, or simply using the <%= %> syntax.
  • If there are larger blocks I prefer to extract to function components and do the conditional via a match as I don’t enjoy reading long if/else in templates, ie:
    defp component(%{role: :admin} = assigns), do: ~H""
    defp component(assigns), do: ~H""
    
  • The number of times I need an else is quite low compared to lone ifs (this is, of course, just me)
  • This last one is pure speculation as I’ve never studied HEEx’s source, but else would have to be aware of its immediate previous sibling and I don’t believe there is precedent for this (closest would be slots checking they are not in other slots). I can imagine this being deemed not worth taking on unless there was overwhelming demand for it.

Having said all that if it were available I would use it, I just don’t personally want it that badly so have never bothered to bring it up myself.

christhekeele

christhekeele

I generally prefer this form. Part of the whole appeal of structured programming is that program structure dictates flow, so you do not have to scan through lines of code before knowing if they will be executed.

Conversely, the above is structure-less, and requires you check after reading any :if element if the next element is an :else to fully understand the output.

Stefano1990

Stefano1990

What makes HEEX different to Vue’s syntax is the fact that Vue doesn’t have the <% %> so it needs to have :else

Where Next?

Popular in Proposals: Ideas Top

azyzz228
The slow network is known to be an Achilles heel of LiveView’s architecture. Recently, I was working on creating a fast rendering map wi...
New
snofang
In a typical business development task, having a function in a context module which accepts attributes of map type and passes them to Ect...
New
GenericJam
I’ve been messing around with image generation models recently and thought this could be wrapped in a library or people could just use th...
New
mikesax
On a Rails/Turbo site, the first page is typically loaded using http GET and then sockets are used navigate and replace HTML content for ...
New
virinchi_cv
The Problem Phoenix 1.8 comes aggressively coupled with Daisy UI, a decision which many developers in the community have had mixed feelin...
New
cevado
IEx is a very powerfull shell and it would be awesome to have all this power integrated inside a code editor. Clojure enables something l...
New
sevensidedmarble
All the pieces are there to execute arbitrary JS commands from the server. You can put them on a data property and call them from the cli...
New
derekkraan
I have been using a multi-endpoint setup in my app, just because I think it makes the most sense for a multi-subdomain app. This worked w...
New
davydog187
I’ve been enjoying the new Streams API, but I keep needing to work around the lack of access to the underlying items. One issue that cons...
New
superchris
Currently there is no out of the box way to support DOM Custom Events in phoenix. I’ve created a separate library to do this, but I’d lov...
New

Other popular topics Top

WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
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
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 43657 311
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
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
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
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
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New

We're in Beta

About us Mission Statement