Backbone.View: Memproses Paparan Front-End

Merupakan representasi ‘kepingan-kepingan’ kecil html  yang terdapat pada sebuah halaman. Inti dari sebuah Backbone.View adalah bagaimana sebuah view dapat mewakili data (backbone.model atau backbone.collection) yang menjadi tanggung jawabnya, serta akibat tindakan-tindakan pengguna pada sebuah view dapat memberi kesan pada data (model atau collection).



Sebagai contoh, katakan anda mempunyai sebuah borang untuk login di mana memerlukan anda memasukkan nama pengguna dan kata laluan. Borang ini berkemungkinan mewakili sebuah View (sisi pandang / hamparan / paparan / display), sementara sebahagian borang atau elemen-elemen yang lain mewakili View yang berlainan.

Lihat contoh ini



Anda jadikan borang yang seringkas ini kepada sebuah Backbone View dan buatkan View itu sendiri yang proses login menggunakan AJAX/JSON kepada server. Untuk menjadikannya lebih mudah, saya akan tampilkan sebuah mesej box beserta datanya sekali ke dalam mesej box itu


Cuba laksanakan kod tersebut dan akan kelihatan seperti berikut

Saya gabungkan keduanya iaitu BackboneJS dan jQuery pada contoh ini. JQuery didapati lebih mudah pada sesetengah kes dan disini saya mahu menampakkan betapa mudahnya kedua pustaka Javaskrip ini diguna bersama. Kebanyakan contoh lain boleh anda dapati di internet dan anda akan mula berpendapat, ya, jQuery itu awesome. Ia banyak membantu dari segi yang lain berbanding apa yang BackboneJS mampu buat. Jadi mengapa tidak digabungkan bersama?

Ada beberapa lagi perkara yang perlu diberi perhatian selain menggabungkan penggunaan jQuery dan BackboneJS.

Saya telah mencipta sebuah model yang digelar `Pembenaran` digunakan untuk menyimpan nama pengguna dan kata laluan yang dimasukkan. Kemudian View diistihar sebagai objek JSON dengan beberapa data dan fungsi.

Tetapan pertama adalah atribut "el". Atribut ini dikenali oleh BackboneJS sebagai sebuah elemen yang dipunyai oleh View. Dalam contoh ini, saya menugaskan keseluruhan borang itu kepada elemen yang dipunyai oleh View ini.



Tetapan seterusnya adalah event dimana Backbone View akan 'mendengar' bagi pihak segala tindakan yang akan diambil oleh pengguna terhadap borang anda. Dalam contoh ini saya tetapkan Backbone View hanya akan 'dengar' pada event 'click' sahaja. Tetapi saya boleh sahaja tetapkan untuk dengar event yang lain-lain. Contohnya perubahan pada medan teks nama pengguna atau kata laluan. Tetapi saya mahu tunjukkan pada anda bagaimana menggabungkan jQuery untuk event-event itu. Event 'klik' itu akan memicu fungsi yang saya telah tetapkan untuk memproses login.


Fungsi initialize adalah sebuah Constructor kepada View. Apabila View memulakan langkahnya


saya telah menempatkan objek JSON  {model: new Pembenaran()} ke dalamnya. 'model' adalah sebahagian objek yang dikenali oleh backboneJS. Apabila saya mula memanggil “new LoginView({model: new Pembenaran()});”, saya telah menugaskan view.Model terhadap objek "Pembenaran" yang baharu. Ini membuka peluang pada saya untuk mengakses "this.model" di sepanjang kod-kod yang terkandung didalam loginView.

jQuery telah digunakan untuk mencari nama pengguna dan kata laluan dalam borang ini, dan memaut event / acara  "change" untuk itu. Bilamana event "change" dipicu, saya menghimpun nilai dari teks medan ke dalam "self.model". Perasan perbezaan perkataan "this" dan perkataan "self"?  Ini adalah satu teknik untuk mengehadkan "this" dalam Javaskrip. Apabila menukar skop antara objek Backbone dan kaedah callback jQuery, "this" berubah mengikut skop objek jQuery yang memicu acara tersebut. Untuk atasi kesulitan ini adalah mencipta pemboleh ubah setempat sebelum memasuki zon jQuery. Lihat baris 11. Tetapkan "self = this". Kemudian pada callback jQuery, saya masih lagi boleh merujuk konteks Backbone View sebagai "self" dan akses ke model view untuk tindakan selanjutnya seperti "set" atribut.

Sekian setelah semua proses jalinan antara kotak input dan model, fungsi login akan manfaatkannya untuk menampilkan mesej box dengan maklumatnya sekali.

Alhasil, tetapkan "window.LoginView" pada baris terakhir adalah jalan untuk memastikan objek view itu terlaksana seperti yang sepatutnya.