#ctx.on()

Subscribe event konteks di RunJS (seperti perubahan nilai field, perubahan properti, refresh resource, dll.). Event akan dipetakan berdasarkan tipe ke custom DOM event di ctx.element atau event bus internal ctx.resource.

#Skenario Penggunaan

#Definisi Tipe

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

#Event Umum

Aturan pemetaan event akhir: yang diawali dengan resource: melalui ctx.resource.on, lainnya biasanya melalui DOM event di ctx.element (jika ada).

#Contoh

#Binding Dua Arah Field (React useEffect + Cleanup)

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

#DOM Listener Native (Pengganti saat ctx.on Tidak Tersedia)

// Saat ctx.on tidak disediakan, dapat langsung menggunakan ctx.element
const handler = (ev) => {
  if (selectEl) selectEl.value = String(ev?.detail ?? '');
};
ctx.element?.addEventListener('js-field:value-change', handler);
// Saat cleanup: ctx.element?.removeEventListener('js-field:value-change', handler);

#Update UI Setelah Resource Refresh

ctx.resource?.on('refresh', () => {
  const data = ctx.resource?.getData?.();
  // Update render berdasarkan data
});

#Penggunaan Berpasangan dengan ctx.off

• Listener yang didaftarkan dengan ctx.on harus dihapus pada waktu yang tepat melalui ctx.off, untuk menghindari memory leak atau pemicu berulang.
• Dalam React, biasanya memanggil ctx.off di function cleanup useEffect.
• ctx.off mungkin tidak ada, disarankan menambahkan optional chaining saat digunakan: ctx.off?.('eventName', handler).

#Hal yang Perlu Diperhatikan

1. Pembatalan berpasangan: setiap ctx.on(eventName, handler) harus memiliki ctx.off(eventName, handler) yang sesuai, dan handler yang diteruskan harus referensi yang sama.
2. Lifecycle: hapus listener sebelum komponen di-unmount atau context dihancurkan, jika tidak dapat menyebabkan memory leak.
3. Ketersediaan event: event yang didukung oleh tipe context yang berbeda berbeda, lihat dokumentasi komponen masing-masing.

#Dokumentasi Terkait

• ctx.off - Menghapus event listener
• ctx.element - Container render dan DOM event
• ctx.resource - Instance resource dan on/off-nya
• ctx.setValue - Menyetel nilai field (akan memicu js-field:value-change)