Does not LiveView.JS work in a loop?

Phoenix Forum Questions / Help
,
1

Hello, I did this function with JS Hook, but I want to know why LiveView.JS does not work in a loop like this:

  defp reset_and_select(js \\ %JS{}, children, id) do
    Enum.map(children, fn %{id: key, data: _data} ->
      js
      |> JS.add_class("hidden", to: "#content-#{key}")
      |> JS.remove_class("border-b", to: "##{key}")
      |> JS.remove_class("border-blue-500", to: "##{key}")
    end)
    |> List.last()
    |> JS.remove_class("hidden", to: "#content-#{id}")
    |> JS.add_class("border-b", to: "##{id}")
    |> JS.add_class("border-blue-500", to: "##{id}")
  end

It just returns the first loop and skips the other.

Update:

I did something like this, but it did not work too.

 def reset_and_select(children, _id) do
    Enum.reduce([:start] ++ children, fn key, acc ->
      if acc == :start do
        %JS{}
      else
        acc
        |> JS.add_class("hidden", to: "#content-#{key}")
      end
    end)
  end

Thank you in advance.

2

There’s nothing “special” about Phoenix.LiveView.JS. It’s a struct like any other, which you modify and eventually turn into text instructions in your html.

Therefore the Enum.reduce/2 approach should actually work, though it can be a bit simpler by using Enum.reduce/3. Something like this:

defp reset_and_select(js \\ %JS{}, children, id) do
    children
    |> Enum.reduce(js, fn %{id: key, data: _data}, acc ->
      acc
      |> JS.add_class("hidden", to: "#content-#{key}")
      |> JS.remove_class("border-b", to: "##{key}")
      |> JS.remove_class("border-blue-500", to: "##{key}")
    end)
    |> JS.remove_class("hidden", to: "#content-#{id}")
    |> JS.add_class("border-b", to: "##{id}")
    |> JS.add_class("border-blue-500", to: "##{id}")
  end
2 Likes