DOM Mutations

inner_html

Sets the innerHTML of a DOM element.

cable_ready["MyChannel"].inner_html(
focus_selector: "string", # [null] - string containing a CSS selector
html: "string", # [null] - the HTML to assign
selector: "string", # required - string containing a CSS selector or XPath expression
xpath: true|false # [false] - process the selector as an XPath expression
)

Life-cycle Callback Events

  • cable-ready:before-inner-html

  • cable-ready:after-inner-html

Reference

Inserts HTML into the DOM relative to an element. Supports behavior akin to prepend & append.

cable_ready["MyChannel"].insert_adjacent_html(
focus_selector: "string", # [null] - string containing a CSS selector
html: "string", # [null] - the HTML to insert
position: "string", # [beforeend] - the relative position to the DOM element (beforebegin, afterbegin, beforeend, afterend)
selector: "string", # required - string containing a CSS selector or XPath expression
xpath: true|false # [false] - process the selector as an XPath expression
)

Life-cycle Callback Events

  • cable-ready:before-insert-adjacent-html

  • cable-ready:after-insert-adjacent-html

Reference

insert_adjacent_text

Inserts text into the DOM relative to an element. Supports behavior akin to prepend & append.

cable_ready["MyChannel"].insert_adjacent_text(
position: "string", # [beforeend] - the relative position to the DOM element (beforebegin, afterbegin, beforeend, afterend)
selector: "string", # required - string containing a CSS selector or XPath expression
text: "string" # [null] - the text to insert
xpath: true|false # [false] - process the selector as an XPath expression
)

Life-cycle Callback Events

  • cable-ready:before-insert-adjacent-text

  • cable-ready:after-insert-adjacent-text

Reference

morph

Fast lightweight DOM diffing/patching without a virtual DOM.

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

When morphing an element with children_only: true you need to make sure that the content you're providing to the html value will result in a successful operation:

  • it must have a single top-level container element with the same CSS selector as the target

  • inside that container element is another element node, not a text node

Consider the following example of #foo, a successful morphing candidate:

show.html.erb
<div>
<%= render partial: "foo", locals: {message: "Am I the medium or the massage?"} %>
</div>
_foo.html.erb
<div id="foo">
<span><%= message %></span>
</div>

If the <div id="foo"> was located in show.html.erb the morph would not succeed because the top-level container that you're replacing would not be present in the replacement HTML.

If you need to render a collection of partials, you'll have to wrap the render method in a container because you cannot have the top-level container in each partial:

show.html.erb
<div id="bar">
<%= render collection: @bars %>
</div>
_bar.html.erb
<span><%= bar.message %></span>
cable_ready["MyChannel"].morph(
children_only: true,
selector: "#bar",
html: "<div id=\"bar\">" + render(Bar.all) + "</div>"
)

Life-cycle Callback Events

  • cable-ready:before-morph

  • cable-ready:after-morph

Reference

outer_html

Replaces a DOM element with new HTML.

cable_ready["MyChannel"].outer_html(
focus_selector: "string", # [null] - string containing a CSS selector
html: "string", # [null] - the HTML to use as replacement
selector: "string", # required - string containing a CSS selector or XPath expression
xpath: true|false # [false] - process the selector as an XPath expression
)

Life-cycle Callback Events

  • cable-ready:before-outer-html

  • cable-ready:after-outer-html

Reference

remove

Removes an element from the DOM.

cable_ready["MyChannel"].remove(
focus_selector: "string", # [null] - string containing a CSS selector
selector: "string", # required - string containing a CSS selector or XPath expression
xpath: true|false # [false] - process the selector as an XPath expression
)

Life-cycle Callback Events

  • cable-ready:before-remove

  • cable-ready:after-remove

Reference

text_content

Sets the text content of a DOM element.

CableReady sets textContent instead of innerText. You can learn more here, or just move on with your day. ☀️

cable_ready["MyChannel"].text_content(
selector: "string", # required - string containing a CSS selector or XPath expression
text: "string", # [null] - the text to assign
xpath: true|false # [false] - process the selector as an XPath expression
)

Life-cycle Callback Events

  • cable-ready:before-text-content

  • cable-ready:after-text-content

Reference