Manajemen Negara Dengan JavaScript Vanilla
Salah satu rintangan terbesar yang harus dilewati saat membuat aplikasi dengan vanilla JavaScript adalah menjaga status informasi yang relevan dengan aplikasi Anda saat pengguna berinteraksi dengannya.
Lamaran saya
Dalam aplikasi web Papan Buletin saya terdapat banyak “buletin”yang berbeda yang dapat dipilih oleh pengguna, dan berdasarkan pilihan pengguna, “papan buletin” milik spesifik tersebut akan ditampilkan buletin.(maaf atas penggunaan kata buletin yang berlebihan)
Ini cukup mudah. Yang perlu saya lakukan hanyalah menambahkan pendengar acara ke input dropdown dan mengumpulkan nilai elemen target — yang berisi id buletin.
Saya kemudian akan meneruskan id itu ke fungsi pengambilan. Ini akan mendapatkan data mengenai buletin yang dipilih dan kemudian menambahkan semua papan buletin yang terkait dengannya. Sederhana.
Tapi sekarang saya ingin memiliki fungsi untuk menambahkan item baru ke papan tertentu. Ini tidak mudah.
Masalah
Setiap kartu papan buletin memiliki ikon + untuk menambahkan item baru — dan jika klik ikon + tersebut, modal akan muncul dengan formulir untuk membuat item baru.
Namun seumur hidup saya, saya tidak tahu cara meneruskan data dari kartu papan buletin ke formulir agar formulir mengetahui kartu papan buletin mana yang akan membuat asosiasi item baru dan di mana menambahkan informasi.
Saya memutuskan ini…
Solusi Saya
Pada pembuatan kartu papan buletin baru, baik saat memuat halaman pertama atau saat membuat papan baru menggunakan AJAX, saya akan menambahkan id ke ikon + yang akan diklik, sehingga saya dapat mengaksesnya dengan
event.target
ini akan memungkinkan saya untuk mengakses atribut yang terkait dengan acara itu.
Namun saya masih perlu meneruskan data ini ke permintaan AJAX 'POST' untuk mengetahui titik akhir mana yang akan dijadikan tujuan permintaan ini dan papan buletin mana yang akan dikaitkan dengan item baru ini.
Saya membuat atribut khusus untuk formulir di modal yang awalnya tidak memiliki nilai apa pun— hanya pada pop up modal dengan acara klik ikon + barulah ia mendapatkan nilai. Nilai ini diambil dari ikon + dan sesuai dengan id unik kartu papan buletin.
Setelah diteruskan ke permintaan AJAX, data disimpan dan papan kemudian dirender ulang dengan item baru.
