globz
Migrate live_patch to .link patch
Hi,
I am trying to migrate my project to live_view 0.18.3 and I am having problems with live_patch…here’s my current code:
def modal(assigns) do
assigns = assign_new(assigns, :return_to, fn → nil end)~H""" <div id="modal" class="phx-modal fade-in" phx-remove={hide_modal()}> <div id="modal-content" class="phx-modal-content fade-in-scale" phx-click-away={JS.dispatch("click", to: "#close")} phx-window-keydown={JS.dispatch("click", to: "#close")} phx-key="escape" > <%= if @return_to do %> <%= live_patch "✖", to: @return_to, id: "close", class: "phx-modal-close", phx_click: hide_modal() %> <% else %> <a id="close" href="#" class="phx-modal-close" phx-click={hide_modal()}>✖</a> <% end %> <%= render_slot(@inner_block) %> </div> </div> """end
defp hide_modal(js \ %JS{}) do
js
|> JS.hide(to: “modal”, transition: “fade-out”)
|> JS.hide(to: “#modal-content”, transition: “fade-out-scale”)
end
How can I rewrite my live_patch into the new Phoenix.Component.link/1 ? I tried various ways but I keep getting this error:
== Compilation error in file lib/primordial_web/live/live_helpers.ex ==
** (SyntaxError) lib/primordial_web/live/live_helpers.ex:40:8: syntax error before: to
|
40 | to: @return_to,
This is what I tried:
<.link patch={
to: @return_to,
id: "close",
class: "phx-modal-close",
phx_click: hide_modal()}>✖</.link>
Anyone can help explain the new syntax? Thank you
Marked As Solved
t0t0
Hi,
your syntax is incorrect, it should be:
<.link
patch={@return_to}
id="close"
class="phx-modal-close"
phx-click={hide_modal()}
>✖</.link>
And to include and merge your if/else condition:
<.link
{if @return_to, do: [patch: @return_to], else: [href: "#"]},
id="close"
class="phx-modal-close"
phx-click={hide_modal()}
>✖</.link>
Last Post!
globz
Thank you so much, the merged if/else is also much better than before.
I haven’t touched this project/Elixir for many months, need to get a refresher on the syntax!
Thank again and happy near year!
Popular in Questions
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
- #api
- #forms
- #metaprogramming
- #security
- #hex









