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">但会照顾孩子吗？我的第一个想法是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

一个众所周知的（如果不是优雅的）解决方案是，您addEventListener将该元素放在 on 上mount()，然后将其放回update()。这是这个想法：

Utils.onDetailsTagState = {
  mount(storeEl) {
    let detailsTag = storeEl.el.closest("details")
    if (detailsTag) {
      storeEl.expand = detailsTag.open
      detailsTag.addEventListener("toggle", event => {
        storeEl.expand = event.target.open
      })
    }
  },
  update(storeEl) {
    let detailsTag = storeEl.el.closest("details")
    if (detailsTag) { detailsTag.open = storeEl.expand }
  }
}

Hooks.callaspable = {
  mounted() { Utils.onDetailsTagState.mount(this) },
  updated() { Utils.onDetailsTagState.update(this) },
}