にむかひて

`temporary_assigns`の要素を削除する

2022年2月 トップ > ひとこと > 調査したことの記録
#Elixir #Phoenix

temporary_assignsは追加/更新ですごい(すごい!)便利だけど、削除に対応していないらしい

  • データは消して、DOM上では非表示にするのがアプローチの1つ

結論(実装例)

  • Javascriptで非表示にするので方法は諸々ありそう
  • 下記は、Phoenix.LiveView.JSを使うイメージ(PhoenixLiveView 0.17から)
  • itemsがtemporary_assigns対象、とする
  • class="hidden"で非表示になる、とする
<%= for item <- @items do %>
<div id={"item-#{item.id}"}
  <p><%= item.name %></p>
  <a class="cursor-pointer" phx-click={delete_item_js(item.id)}>削除</a>
</div>
  alias Phoenix.LiveView.JS

  def delete_item_js(js \\ %JS{}, item_id) do
    js
    |> JS.add_class("hidden", to: "#item-#{item_id}")
    |> JS.push("delete_item", value: %{item_id: item_id})
  end

  def handle_event("delete_item", %{item_id: item_id}, socket) do
    略
    {:noreply, socket}
  end

参考にさせていただいた資料

サイト内検索