Skip to main content
Variabel global mirip dengan konsep state pada React. Variabel ini utamanya digunakan untuk pengelolaan state di tingkat halaman, dan developer juga dapat mengubah state global serta memicu render ulang halaman dengan memanggil API.

Buat variabel global

Buat variabel global dengan menambahkan variabel pada panel Sumber Data: Saat membuat variabel global, tentukan hal-hal berikut:
  • Nama - Mendeklarasikan nama variabel global. Harus mengikuti konvensi penamaan variabel JavaScript.
  • Deskripsi - Mendefinisikan deskripsi variabel global. Deskripsi ini ditampilkan saat pengikatan variabel.
  • Data - Menetapkan nilai awal variabel global. Mendukung tipe dasar JavaScript seperti string, boolean, dan object.
Platform YiDA menyediakan variabel global default bernama urlParams untuk mengambil parameter dari URL halaman saat ini. Akses parameter URL melalui this.state.urlParams.xxx, dengan xxx sebagai nama parameter. Jika parameter tidak ditemukan, akan dikembalikan nilai undefined.

API

Platform YiDA menyediakan dua API untuk membaca dan menulis variabel global.

Sudah dibaca

Di panel pengikatan variabel dan panel aksi, ambil variabel global halaman menggunakan API berikut (pada skenario pengikatan variabel, this dapat dihilangkan dan langsung gunakan state.xxx):

Perbarui

Platform menyediakan API setState untuk mengubah variabel global halaman dan memicu render ulang halaman (mirip dengan setState pada React), seperti berikut:
API setState pada YiDA tampak konsisten dengan React, tetapi memiliki sedikit perbedaan:
  • API setState pada YiDA tidak menyediakan kemampuan Callback, sehingga Anda tidak dapat menulis fungsi callback seperti pada setState React.
  • API setState pada YiDA menggunakan solusi data reaktif. Oleh karena itu, data state baru dapat langsung diakses setelah menjalankan setState, seperti berikut:

Skenario penggunaan

Setelah variabel global didefinisikan, terdapat dua skenario konsumsi pada halaman kustom:

Pengikatan variabel

Ikat state dengan mengatur pengikatan variabel pada properti komponen. Ikat variabel global dengan mengetik secara manual atau memilih dari Sumber Data (pada skenario pengikatan variabel, format variabelnya adalah: state.xxx). Ikat properti Konten dari komponen Teks ke sebuah variabel: Ikat data Konten ke variabel global bernama name: Klik Pratinjau di sudut kanan atas untuk melihat efek pengikatan berikut:

Penanganan aksi

Pada panel aksi, developer dapat membaca dan menulis variabel global melalui pemrograman JavaScript, seperti berikut: Terlihat persis seperti API React, bukan? Kunjungi dokumentasi penanganan event untuk melihat instruksi penggunaan penanganan event.