LiveView Hooks. What am I doing wrong?

polygonpusher · May 12, 2020, 6:36pm

Following along with this example from the docs:
https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#module-js-interop-and-client-controlled-dom

I’ve added this little test hook.

github.com

MorphicPro/morphic.pro/blob/liveview/assets/js/app.js#L34-L48


let Hooks = {}
Hooks.Test = {
  mount() {
    console.log("HELLO!")
    alert("WTF?")
  }
}
let liveSocket = new LiveSocket("/live", Socket, { hooks: Hooks, params: { _csrf_token: csrfToken } })

// Show progress bar on live navigation and form submits
// window.addEventListener("phx:page-loading-start", info => NProgress.start())
// window.addEventListener("phx:page-loading-stop", info => NProgress.done())

// connect if there are any LiveViews on the page
liveSocket.connect()

I’ve added the dom element

github.com

MorphicPro/morphic.pro/blob/liveview/lib/morphic_pro_web/live/post_live/edit.html.leex

<div id="post-edit" phx-hook="Test">

<%= live_component @socket,  MorphicProWeb.PostLive.FormComponent,
  id: @post.id || :new,
  title: @page_title,
  action: @live_action,
  post: @post %>


<script type="text/javascript" src="<%= Routes.static_path(@socket, "/js/vendors~post_edit~snap_edit.bundle.js") %>"></script>
<script type="text/javascript" src="<%= Routes.static_path(@socket, "/js/post_edit.bundle.js") %>"></script>
</div>

But I get nothing yet I can see the Hook in the LiveSocket and even call it directly.

What am I missing here?

polygonpusher · May 12, 2020, 6:41pm

Looks like a typo
“mount” > “mounted”

Thanks to @ Elijah Kim for pointing this out.

Matheus · May 12, 2020, 6:45pm

Yes, the correct way to call is “mounted( )”