Navigasi & refresh
— NX.load · NX.Refresh
Empat cara berbeda mengubah tampilan SPA. Jangan disamakan.
Ringkasan ini selaras README proyek contoh Projects/web.
1. Perbandingan cepat
NX.load |
Refresh.refresh |
Refresh.partial |
hard: true |
|
|---|---|---|---|---|
| Fungsi | Pindah ke rute lain | Jalankan ulang handler rute yang sama | Ganti isi satu elemen DOM | Reload tab (F5) |
| URL | Berubah | Umumnya sama | Tidak berubah | Reload penuh |
| Handler template | Rute tujuan dijalankan | Rute aktif dijalankan ulang | Tidak dijalankan | Semua dari awal |
onRoute / meta |
Ya | Ya | Tidak (kecuali manual) | Ya |
| Kapan | Menu, link programatik | Setelah simpan, ulang seluruh halaman rute | Satu kartu / list / #nx_body_* |
Debug / putus total SPA |
2. NX.load
Memanggil nexaRoute.navigate(route, pushState) — bukan refresh.
await NX.load("blog");
await NX.load("beranda", false); // replace historyLihat Route — NX.load.
3. NX.Refresh.refresh
Reload seluruh view rute di #main. Bukan untuk satu panel.
await NX.Refresh.refresh();
await NX.Refresh.refresh({ route: "blog" });
await NX.Refresh.refresh({ hard: true });
Hindari
refresh() jika hanya sidebar atau satu kolom yang berubah — pakai partial.
4. NX.Refresh.partial
Hanya mengganti target; tidak navigate, tidak onRoute otomatis.
| Opsi | Keterangan |
|---|---|
target | Wajib — #nx_body_navigation atau Element |
scope | Default #main |
html | String → innerHTML |
render | Async → string / Element / Fragment |
update | Mutasi DOM yang sudah ada |
keepScroll | Scroll kolom nx_body_* lain tidak loncat |
event | false = tidak dispatch nxui:partialRefresh |
await NX.Refresh.partial({
scope: "#main",
target: "#nx_body_navigation",
keepScroll: true,
render: async () => {
const { navigation } = await import("/assets/modules/tree/navigation.js");
return await navigation();
},
});
Path import() relatif ke file template pemanggil; disarankan path absolut.
Event listener: window.addEventListener("nxui:partialRefresh", …).
Detail: Route — NX.Refresh.