How to use the Javascript Events that are included in CableReady

Question

I'm trying to use CableReady and I noticed in the docs that there are associated JavaScript Events that I can use.

However, there are no examples of how to use them.

Example:

cable_ready["MyChannel"].morph(
  selector:                 "string",   # required - string containing a CSS selector or XPath expression
  html:                     "string",   # [null]   - the HTML to assign
  children_only:            true|false, # [null]   - indicates if only child nodes should be morphed... skipping the parent element
  permanent_attribute_name: "string",   # [null]   - an attribute name that prevents elements from being updated i.e. "data-permanent"
  focus_selector:           "string",   # [null]   - string containing a CSS selector
)

And the docs have:

JavaScript Events

cable-ready:before-morph

cable-ready:after-morph

However I don't know how to call these events in my Javascript.

Has anyone worked with these before?

Answer 1

You can use an after-morph event like this:

document.addEventListener("cable-ready:after-morph", () => {  
  console.log('after-morph') 
})

Now, let's say we've just performed a outer_html operation from our Rails controller and we would like to catch the after event:

document.addEventListener("cable-ready:after-outer-html", (event) => {
  console.log('after-outer-html') 
})