Using LiveView with AlpineJS

Blogs & Podcasts Blog Posts
, , , , ,
6

I was trying to integrate Apline and Phoenix LiveView and your blog posts have been of great help. Thank you for sharing your knowledge with us.

I have a question, what if we have multiple components on a page that want to register for Alpine Hook.

For ex

Hooks.Counter = {
  mounted() {
    window.counterHook = this
  },
  decrement() {
    this.pushEvent('decrement', {})
  },
  increment(selector) {
    this.pushEventTo(selector, 'increment', {})
  }
}

How do you create uniqueness above?

So i tried to do CustomEvent dispatch and get the push_element. This works -

<div x-data @push-element-updated="console.log('captured custom event')">
    <div id="test_tb_<%= @id %>" phx-hook="EscapeHook">
  </div>

Hooks.EscapeHook = {
  mounted() {
    console.log("mounted escape hook")
    let main_this = this;
    var event = new CustomEvent('push-element-updated', {
      bubbles: true,
      detail: {
        push_element: main_this
      }
    });
    console.log("event dispatched =======")
    this.el.dispatchEvent(event);
  }
}

But the above doesn’t work when the EscapeHook element is put inside a conditional. For ex -

<%= if @is_being_edited do %>
<div x-data @push-element-updated="console.log('captured custom event')">
    <div id="test_tb_<%= @id %>" phx-hook="EscapeHook">
  </div>
<% end %>

How can we make it work inside a conditional?

Thank you once again for taking the time to enlighten us all.