Backbone.js Asas: Membawa aplikasi ke kehidupan dengan acara

Artikel ini meneroka Backbone.js, rangka kerja JavaScript yang menggunakan seni bina MV* untuk membina aplikasi. Ia memberi tumpuan kepada pengendalian acara, aspek penting untuk memisahkan kebimbangan antara pandangan dan model.

Konsep Utama:

• mv* arsitektur: backbone.js menggunakan model-view-* arsitektur, memisahkan data (model), persembahan (pandangan), dan logik aplikasi (sering ditangani secara tersirat dalam pandangan atau melalui pengawal tersuai) .
• Pengendalian Acara: Inti artikel ini adalah bagaimana Backbone.js menguruskan peristiwa untuk memudahkan komunikasi antara pandangan dan model. Perubahan dalam model mencetuskan peristiwa, yang melihat mendengar dan bertindak balas (mis., Rendering semula).
• Lihat Tanggungjawab: Pandangan menjadikan UI, memaparkan data dari model, dan mengendalikan input pengguna dengan mencetuskan peristiwa.
Tanggungjawab Model
• Model: Model menguruskan data aplikasi, kemas kini data berdasarkan peristiwa yang dicetuskan dari pandangan, dan berpotensi berinteraksi dengan pangkalan data.

Tutorial dibina pada pelajaran sebelumnya, memperkenalkan logik seperti pengawal untuk mengendalikan interaksi pengguna. Ia menekankan pentingnya memisahkan kebimbangan: pandangan mengendalikan persembahan dan input pengguna, sementara model menguruskan logik data.

Teknik pengendalian acara:

Butiran artikel Dua kaedah utama untuk mengendalikan acara di Backbone.js:

1. events hash: Pendekatan ini secara langsung mentakrifkan pengendali acara dalam pandangan menggunakan peta nilai utama. Kunci menentukan elemen peristiwa dan sasaran (mis., 'click .add-one': 'addOne'), dan nilai adalah fungsi untuk dilaksanakan.

2. listenTo Kaedah: Kaedah ini membolehkan objek (biasanya pandangan) untuk mendengar peristiwa pada objek lain (biasanya model). Ia amat berguna untuk menguruskan pendengar acara dan memastikan mereka dibersihkan dengan betul. Contohnya menggunakan this.listenTo(this.model, "change", this.render); untuk membuat semula pandangan apabila model berubah.

Tutorial menyediakan contoh praktikal untuk menambahkan dan menolak stok dari aplikasi inventori papan luncur. Ia menunjukkan bagaimana untuk:

1. Tambah butang ke templat paparan untuk mencetuskan peristiwa.
2. Tentukan pengendali acara dalam paparan (, addOne) yang mengemas kini model. minusOne
Melaksanakan fungsi model (
3. , addOne) untuk mengubah suai data dan mencetuskan peristiwa minusOne. "change"
Gunakan fungsi
4. dalam pandangan untuk mendengar acara initialize model dan membuat semula pandangan. "change"
Artikel ini disimpulkan dengan demo codepen dan seksyen Soalan . Panggilan untuk Tindakan menggalakkan kursus premium SitePoint pada Backbone.js.

on

Atas ialah kandungan terperinci Backbone.js Asas: Membawa aplikasi ke kehidupan dengan acara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!