knoebber
Anonymous functions as component attributes?
I have a table component that can apply custom sorting. Each <th> element has a patch link that leads to a new URL, E.G, http://localhost:4000/runs?order=desc&order_by=miles or http://localhost:4000/runs?order=asc&order_by=miles
I accomplished this by passing the table component an anonymous function that generates a route given a map of params, which is then passed to an internal lib function that generates the filter map. Here’s an example of how I use the component in a LiveView:
<.table
rows={@runs}
get_route={fn filter -> ~p"/runs?#{filter}" end} # anonymous function that makes next order
filter={@filter} # map of URL params - <.th> uses this to render the current order
>
<:col :let={run} label="Miles" order_col="miles">
<.link navigate={~p"/runs/#{run.id}"}>
<%= run.miles %>
</.link>
</:col>
....
</.table>
Is there a better way to do this? Does it make any difference if I instead declare a named get_route function in the module? Here’s an abbreviated version of my component:
defp get_next_sort_link(get_route, filter, order_col) do
filter
|> Filter.apply_sort(order_col) # returns a map
|> get_route.() # applies the anonymous function
end
attr :filter, :map, default: %{}
attr :rows, :list, required: true
attr :get_route, :any, default: nil # is there a better type than 'any' ?
slot :col do
attr :label, :string, required: true
attr :order_col, :string
end
def table(assigns) do
<table>
<thead>
<tr>
<%= for col <- @col do %>
<.th
order={Filter.current_order(@filter, Map.get(col, :order_col, nil))}
next_sort_link={
get_next_sort_link(
@get_route,
@filter,
Map.get(col, :order_col, nil)
)
}
>
<%= col.label %>
</.th>
<% end %>
...
end
This all works and doesn’t cause any problems as far as I can tell, but I’m wondering if there is a better way. Thx!
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
- #forms
- #api
- #metaprogramming
- #hex
- #security









