Alpine.js in the Data Center

Understanding $el, $refs, and $root

Data Center Activity Log

No activity yet. Interact with the demos below.

$el: The Current Server

A server can interact with itself, like running a self-diagnostic and changing its own status light. $el refers to the current DOM element.

Interactive Demo

Code Example

<button @click="runSelfCheck($el)">
  Run Self-Check
</button>

$refs: Named Systems

A central panel can control specific, named systems (like cooling or power). $refs lets you access any element within your component that has an x-ref attribute.

Interactive Demo

Cooling System: Standby
Power Grid: Nominal

Code Example

<div x-ref="coolingSystem">...</div>

<button @click="activateSystem()">
  ...
</button>

// In JS:
this.$refs.coolingSystem.classList.add(...)

$root: The Entire Facility

A facility-wide alert or lockdown affects the entire data center boundary. $root refers to the root element of the current Alpine component.

Interactive Demo

This button will add a red border to this entire card, which is the component's root.

Code Example

<div x-data="...">
  <button @click="$root.classList.add('alert')">
    ...
  </button>
</div>