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
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/elsein templates, ie:defp component(%{role: :admin} = assigns), do: ~H"" defp component(assigns), do: ~H"" - The number of times I need an
elseis quite low compared to loneifs (this is, of course, just me) - This last one is pure speculation as I’ve never studied HEEx’s source, but
elsewould 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
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
What makes HEEX different to Vue’s syntax is the fact that Vue doesn’t have the <% %> so it needs to have :else
Popular in Proposals: Ideas
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #hex









