getBindData

Access or initialize the binding metadata associated with a node.

getBindDataCleanup and Unbind

Access or initialize the binding metadata associated with a node.

Overview

The getBindData function is used to retrieve or create a BindData object associated with a DOM node. The BindData object contains information about bound data and associated unbinders for Regor.

Try it live

Own a node through its full lifetimeLive API

Live preview

Source value: 0 · Node: absent

0Source observers

0Root unbinders

0Custom cleanup calls

Unbind keeps the node but freezes its bindings. Remove + drain removes it and flushes deferred cleanup.

cleanup.ts

import {
  addUnbinder,
  createApp,
  drainUnbind,
  getBindData,
  html,
  observerCount,
  onUnmounted,
  ref,
  removeNode,
  sref,
  unbind,
  useScope,
} from 'regor'

export function createCleanup(interactive = false) {
  const host = sref<HTMLElement | null>(null)
  const source = ref(0),
    value = ref(0),
    present = ref(false),
    bound = ref(false)
  const observers = ref(0),
    callbacks = ref(0),
    registered = ref(0)
  let node: HTMLElement | null = null
  const inspect = () => {
    observers(observerCount(source))
    registered(node ? getBindData(node).unbinders.length : 0)
  }
  const mount = () => {
    if (!host() || node) return
    node = document.createElement('div')
    node.className = 'directive-card api-owned-node'
    host()!.appendChild(node)
    createApp(
      useScope(() => ({ source })),
      {
        element: node,
        template:
          '<strong>Owned node</strong><p>Bound value: <output r-text="source"></output></p>',
      },
    )
    addUnbinder(node, () => callbacks(callbacks() + 1))
    present(true)
    bound(true)
    inspect()
  }
  const detach = () => {
    if (node) unbind(node)
    bound(false)
    inspect()
  }
  const remove = async () => {
    if (!node) return
    removeNode(node)
    await drainUnbind()
    node = null
    present(false)
    bound(false)
    inspect()
  }
  onUnmounted(() => {
    if (node) {
      unbind(node)
      node.remove()
    }
  })
  return {
    interactive,
    host,
    value,
    present,
    bound,
    observers,
    callbacks,
    registered,
    mount,
    detach,
    remove,
    increment: () => {
      source(source() + 1)
      value(source())
      inspect()
    },
  }
}

export const cleanupTemplate = html` <div class="guide-demo">
  <div class="guide-session-bar">
    <button type="button" @click="mount" :disabled="!interactive || present">
      Mount node</button
    ><button type="button" @click="increment" :disabled="!interactive">
      Write +1</button
    ><button type="button" @click="detach" :disabled="!interactive || !bound">
      Unbind</button
    ><button type="button" @click="remove" :disabled="!interactive || !present">
      Remove + drain
    </button>
  </div>
  <p>
    Source value: <strong>{{ value }}</strong> · Node: {{ present ? 'present' :
    'absent' }}
  </p>
  <div :ref="host"></div>
  <div class="guide-metrics">
    <div><output>{{ observers }}</output><span>Source observers</span></div>
    <div><output>{{ registered }}</output><span>Root unbinders</span></div>
    <div><output>{{ callbacks }}</output><span>Custom cleanup calls</span></div>
  </div>
  <p class="guide-hint">
    Unbind keeps the node but freezes its bindings. Remove + drain removes it
    and flushes deferred cleanup.
  </p>
</div>`

browser.ts

import { createApp, RegorConfig, useScope } from 'regor'
import { apiExamples } from './examples'

const element = document.getElementById('api-demo')
const name = element?.dataset.example
if (element && name && Object.hasOwn(apiExamples, name)) {
  const example = apiExamples[name as keyof typeof apiExamples]
  const scope = useScope<object>(() => example.create(true))
  const config =
    'config' in scope.context && scope.context.config instanceof RegorConfig
      ? scope.context.config
      : undefined
  createApp(scope, { element, template: example.template }, config)
}

Mount, write, unbind, or remove and drain. Watch the DOM, observer count, and registered cleanup.

Usage

Retrieving or Creating BindData

To retrieve the BindData associated with a DOM node, call the getBindData function with the DOM node as the parameter. If a BindData object is already associated with the node, it will be returned. If not, a new BindData object will be created and associated with the node.

Example

import { getBindData } from 'regor'

// Retrieve or create BindData for a DOM node
const someElement = document.getElementById('example')
const bindData = getBindData(someElement)

// Access the BindData properties
console.log(bindData.data) // Access bound data
console.log(bindData.unbinders) // Access associated unbinders

Parameters

node: The DOM node for which you want to retrieve or create the associated BindData object.

Return Value

The getBindData function returns a BindData object associated with the provided DOM node. This object contains the following properties:

unbinders: An array of unbinders that can be used to remove bound data and associated logic from the DOM node.
data: A record of bound data, where keys represent data properties, and values represent the associated data.

Treat binding metadata as a low-level API

Inspect metadata deliberately. Prefer app handles and lifecycle hooks for ordinary ownership and cleanup.

Notes

The getBindData function is typically used internally within Regor to manage bound data and unbinders associated with DOM nodes.
It provides a way to access and manipulate the bound data and unbinders for a specific DOM element.
BindData objects are created and associated with DOM nodes as needed when data is bound to elements using Regor.
The unbind function can be used to remove bound data and associated unbinders from a DOM node, effectively cleaning up any Regor-related bindings.
This function is primarily intended for use in advanced scenarios where direct access to Regor's internal data management is required.