#ctx.on()

Suscríbase a eventos de contexto (como cambios en el valor de los campos, cambios de propiedades, actualizaciones de recursos, etc.) en RunJS. Los eventos se mapean a eventos DOM personalizados en ctx.element o al bus de eventos interno de ctx.resource según su tipo.

#Escenarios de uso

#Definición de tipo

on(eventName: string, handler: (event?: any) => void): void;

#Eventos comunes

Reglas de mapeo de eventos: Los eventos con el prefijo resource: pasan por ctx.resource.on, mientras que los demás suelen pasar por eventos DOM en ctx.element (si existe).

#Ejemplos

#Vinculación bidireccional de campos (React useEffect + Limpieza)

React.useEffect(() => {
  const handler = (ev) => setValue(ev?.detail ?? '');
  ctx.on?.('js-field:value-change', handler);
  return () => {
    ctx.off?.('js-field:value-change', handler);
  };
}, []);

#Escucha de DOM nativo (Alternativa cuando ctx.on no está disponible)

// Cuando ctx.on no está disponible, puede usar ctx.element directamente
const handler = (ev) => {
  if (selectEl) selectEl.value = String(ev?.detail ?? '');
};
ctx.element?.addEventListener('js-field:value-change', handler);
// Durante la limpieza: ctx.element?.removeEventListener('js-field:value-change', handler);

#Actualización de la interfaz de usuario tras la actualización del recurso

ctx.resource?.on('refresh', () => {
  const data = ctx.resource?.getData?.();
  // Actualizar el renderizado basado en los datos
});

#Coordinación con ctx.off

• Los escuchadores registrados mediante ctx.on deben eliminarse en el momento adecuado a través de ctx.off para evitar fugas de memoria o activaciones duplicadas.
• En React, ctx.off se llama habitualmente dentro de la función de limpieza de useEffect.
• ctx.off podría no existir; se recomienda utilizar el encadenamiento opcional: ctx.off?.('eventName', handler).

#Notas

1. Cancelación emparejada: Cada ctx.on(eventName, handler) debe tener un ctx.off(eventName, handler) correspondiente, y la referencia del handler pasada debe ser idéntica.
2. Ciclo de vida: Elimine los escuchadores antes de que el componente se desmonte o el contexto se destruya para evitar fugas de memoria.
3. Disponibilidad de eventos: Los diferentes tipos de contexto admiten eventos distintos. Consulte la documentación específica de cada componente para obtener más detalles.

#Documentación relacionada

• ctx.off - Eliminar escuchadores de eventos
• ctx.element - Contenedor de renderizado y eventos DOM
• ctx.resource - Instancia de recurso y sus métodos on/off
• ctx.setValue - Establecer el valor del campo (activa js-field:value-change)