Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. BackboneJS
Code

Backbone dan DOM Display

by
Length:MediumLanguages:

Malay (Melayu) translation by Salim bin Abdullah (you can also view the original English article)

Final product image
What You'll Be Creating

Gambaran keseluruhan

Paparan tulang belakang menyediakan konvensyen dan abstraksi berguna untuk antara muka pengguna. Walau bagaimanapun, untuk memasukkan fungsi UI dalam aplikasi anda, Backbone tidak direka untuk menyokongnya, anda harus mempertimbangkan cara mengintegrasikan fungsi khas atau pihak ketiga secara berkesan ke dalam aplikasi Backbone anda. Akibatnya, pemaju mesti mengemudi cabaran dan mengelakkan konflik rumit di antara perpustakaan luaran dan Backbone.

Pengenalan Backbone.js

Backbone adalah cara yang hebat untuk menguruskan kod sisi pelanggan anda. Dengan abstraksi seperti model, paparan, dan koleksi, Backbone membantu pemaju serius menulis aplikasi yang teratur dan berskala.

Walaupun terdapat banyak alternatif untuk Backbone, termasuk Angular dan Ember, Backbone memberi para pembangun kebebasan yang luar biasa untuk menulis dan mengatur kod mereka dengan cara yang semula jadi dan selesa tanpa memikirkan tentang bagaimana Model Obyek DOM.

Kurus pada Views Backbone

Paparan adalah salah satu komponen yang paling kuat dan fleksibel di Backbone. Menurut pengarang Backbone:

Tunjang tulang belakang adalah konvensyen yang hampir tidak hanya sekadar kod - mereka tidak menentukan apa-apa tentang HTML atau CSS andauntuk anda, dan boleh digunakan dengan perpustakaan template JavaScript.

Mereka digunakan untuk memanipulasi apa yang pengguna lihat dalam pelayar mereka, dan mereka memudahkan komunikasi dengan model. Oleh itu, dalam paradigma Model-View-Controller, berguna untuk memikirkan Views Backbone sebagai pandangan dan pengawal.

Ini mempunyai implikasi yang serius apabila membangun aplikasi dengan interaksi pengguna yang signifikan. Sebenarnya, terdapat banyak situasi di mana anda mungkin mahu menggunakan beberapa perpustakaan lain untuk memanipulasi DOM. Data berasaskan web dan visualisasi permainan adalah dua contoh di manaanda mungkin memilih untuk mempunyai perpustakaan lain yang mengendalikan beberapa pandangan pengguna anda. Akibatnya, anda mungkin mempertimbangkan menggunakan jQuery, d3.js, crossfilter, atau three.js untuk beberapa keperluan manipulasi DOM anda.

Mujurlah, ada cara untuk membuat Backbone berfungsi dengan baik dengan manipulator DOM yang lain.

Manipulate Model Objek Dokumen di Backbone

Sebelum kita masuk ke dalamnya, mari kita semak manipulasi DOM di Backbone. Mari kita mulakan dengan objek paparan asas.

Nah Sekarang, mari kita sampaikan pandangan tentang cara membuat dirinya sendiri dengan menentukan kaedah. render() . kaedah

Terdapat beberapa perkara yang berlaku di sini, jadi mari ikuti langkah-langkah.

Mendefinisikan kaedah .render () Metode

Pertama, kita mentakrifkan kaedah .render() yang merangkumi logik yang diperlukan untuk membuat HTML. Ambil perhatian bahawa Backbone datang dengan kaedah .render() daripada jarak jauh. Walau bagaimanapun, ia tidak melakukan apa-apa. Ia direka untuk ditindih dengan logik khusus!

Mendapatkan Kandungan HTML

Contoh di atas menganggap bahawa anda mendapat HTML di suatu tempat. Anda boleh menggunakan _.template () . Sebagai alternatif, kita boleh menggunakan perpustakaan templat lain, seperti Handlebars (kegemaran peribadi saya). Yang benar-benar penting adalah, entah bagaimana, kami mendapat beberapa kandungan HTML.

Apa itu el?

Kami memerlukan tempat untuk meletakkan kandungan HTML; itulah titik el . Seperti .render () , el adalah atribut yang datang dengan Pandangan Backbone dari kotak. Ia merujuk kepada elemen HTML (dan semua anaknya) yang terkandung dalam pandangan ini. Dalam contoh di atas, kami tidak menyatakan el . Secara lalai, el ialah div  Walau bagaimanapun, kita boleh dengan mudah menetapkan elemen induk seperti:

Ada juga $el , yang hanya el dibungkus jQuery. Kita akan melihat bahawa $el memainkan peranan yang kuat dalam menguasai pandangan Backbone.

Kembali this ...

Akhir sekali, kita kembali merujuk kepada objek itu sendiri untuk membenarkan chaining. Walaupun tidak benar-benar diperlukan, kembali this adalah konvensyen. Tanpa return this , kita memerlukan beberapa cara untuk mengakses kandungan HTML unsur tersebut. Kod berikut menerangkan penyelesaian alternatif.

Uhh, tiada apa di skrin!

Mata yang baik. Walaupun kita memanggil .render () , tidak ada apa-apa pada skrin-apa yang boleh diberikan?

Ini berlaku kerana kami tidak berinteraksi dengan DOM. Apa yang kita lakukan ialah menjana beberapa HTML dan mewakilinya dalam objek JavaScript yang dipanggil aView . Kerana sekarang kita mempunyai akses kepada HTML yang dijana, yang perlu kita lakukan ialah menambah atau memasukkan HTML dalam DOM aplikasi web anda.

Untuk memindahkan segalanya, kami juga akan menyediakan aplikasi mini supaya apabila halaman dimuatkan, paparan akan muncul. Berikut adalah pandangan HTML dan JavaScript anda.

Persediaan HTML asas

Inilah Apa yang Berlaku dalam App.js

Pergi ke pelayan / penyemak imbas setempat anda, muatkan halaman, dan aplikasi anda harus dijalankan!

Menggunakan Backbone dan jQuery serentak

Backbone Fleksibiliti membolehkan penggunaan perpustakaan pihak ketiga untuk memanipulasi DOM. Satu senario ialah apabila anda mahu menggunakan jQuery dan Backbone secara serentak untuk memanipulasi pandangan anda. Berikut adalah contoh yang dikemas kini.

Kod di atas akan menghasilkan dua perenggan di halaman. Perenggan pertama mengandungi "Beberapa HTML". Perenggan kedua mengandungi "HTML Lain".

Untuk menguji pemahaman anda tentang ini, sebaliknya kaedah panggilan seperti:

Kod di atas akan menghasilkan satu perenggan: "Beberapa HTML". Dalam kedua-dua kes, terdapat juga elemen <p>  yang tidak mengandungi apa-apa di dalamnya. Kami akan membincangkannya dalam seketika.

Manipulate DOM dalam Views Backbone dengan cekap

Memahami keajaiban manipulasi DOM yang cekap (dan traversal) memerlukan pemahaman this.$el dan this.$() . Dengan menggunakan this.$el , kami menyelaraskan DOM manipulasi dengan kandungan yang terkandung dalam paparan. Menggunakan this.$() , Kami menjaringkan DOM traversal ke pokok DOM dalam pandangan.

Akibatnya, dalam konteks Backbone, beberapa penggunaan $() (daripada this.$() ) Dapat tidak cekap. Sebagai contoh, katakan kami ingin melintasi DOM untuk mencari beberapa elemen. Kita boleh menggunakan kaedah traversal DOM biasa, termasuk .find () , .children () .closest () first () , dan sebagainya.

Sekiranya kita tahu , secara priori, bahawa elemen yang kita cari kebohongan di suatu tempat dalam pandangan DOM, maka kita harus menggunakannya this.$() Untuk mengelakkan pencarian yang tidak perlu untuk pokok DOM yang lebih besar. Jika elemen yang kami cari terletak di luar paparan DOM, maka kami harus menggunakan $() .

Contohnya, kaedah .specialRender() menggunakan DOM traversal tempatan untuk memastikan kita mencari unsur-unsur dengan kelas empty dalam konteks pandangan. Sekiranya didapati, ia menentukan kandungan HTML unsur itu untuk memasukkan span dan teks "Tiada lagi kosong".

Kesimpulannya

Dalam artikel ini, kita mengkaji pandangan Backbone, membincangkan caramembuat pandangan Backbone di DOM, dan meneroka cara membuat Backbone berfungsi dengan baik dengan perpustakaan lain yang mungkin anda ingin gunakan untuk memanipulasi DOM. Kami juga mempelajari tentang kaedah dan kaedah DOM traversal setempat yang dikenal pasti dengan cekap dan tidak cekap merentasi DOM.

Bahagian seterusnya artikel ini akan menggali contoh yang lebih kompleks untuk mendapatkan banyak perpustakaan untuk bekerjasama dalam memanipulasi DOM.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.