Elixir phoenix LiveView 可折叠在更新时折叠

Question

问题
LiveView 折叠我打开的元素。
细节
我有一个元素在页面加载时开始折叠:

<a class="collapse_trigger">...</a>
<div class="is-collapsible">
# content updated by liveview
</div>

如果用户点击可折叠，则可折叠有一个类 .is-active .

<a class="collapse_trigger">...</a>
<div class="is-collapsible is-active">
# content
</div>

但是 liveview 删除了该类。知道如何确保 liveview 忽略父元素 <div class="is-collapsible is-active">但照顾 child ？
我的第一个想法是 phx-update="ignore" .但现在我想我需要将可折叠的逻辑放入后端。 :/
附加信息
我用 bulma-collapsible一个CSS更改:

// the following is necessary because liveview does not work well with the bulma-collapsible. Otherwise elements would stay open but can be closed by clicking them twice.
.is-collapsible{
  height: 0;
  &.is-active{
    height: auto;
  }
}

Answer 1

仅前端更改
为了使用仅前端选项，我建议以下内容。

我们需要为该可折叠元素存储状态。

我们需要在每个套接字 channel 更新

时恢复该元素的可折叠状态

为简单起见，我将使用纯 JavaScript。
我们需要修改按钮，并编写函数来存储状态(我使用简单的localStorage)

<a class="collapse_trigger" onclick="memoizeCollapsibleState()">...</a>

<script type="text/javascript">
  function memoizeCollapsibleState() {
    if (!localStorage.getItem('collapsibleState')) {
      localStorage.setItem('collapsibleState', true)
    } else {
      localStorage.removeItem('collapsibleState')
    }
  }
</script>

之后我们需要编写函数来从本地存储中恢复该状态

function restoreCollapsibleState() {
  var collapsibleEl = document.getElementById('collapseExample');

  if (localStorage.getItem('collapsibleState')) {
    collapsibleEl.classList.add('is-active')
  }
}

最后一刻我们需要将该函数绑定(bind)到 phoenix_live_view套接字更新，我们需要在窗口加载后立即进行。

window.onload = init;

function init() {
  liveSocket.getSocket().channels[0].onMessage = function (e, t, n) {
    setTimeout(restoreCollapsibleState, 10)
    return t
  } 
}

setTimeout的目的|功能是套接字更新是异步操作，我们需要添加一些延迟才能恢复可折叠状态。 10ms 似乎没问题，但我们可以将其更改为任何其他去抖动功能，我只是为了简单起见，认为这是概念证明
仅后端更改
我刚刚用默认的 live phoenix 结构做了一个例子 mix phx.new my_app --live为其添加了 Bootstrap (但我认为 bulma 几乎遵循相同的规则)
并将 Phoenix 直播模板修改为以下

<div class="collapse <%= if (@results && String.trim(@query) != ""), do: "show", else: "" %>" id="collapseExample">
  <div class="card card-body">
    <%= for {app, _vsn} <- @results do %>
      <p value="<%= app %>"><%= app %></p>
    <% end %>
  </div>
</div>

因此，如果有任何结果并且查询不为空，则永远不会折叠。
对于你的情况，我认为它会略有不同

<a class="collapse_trigger">...</a>
<div class="is-collapsible <% if (@results && String.trim(@query) != "") do: "is-active", else: "" %>">
# content
</div>