Advertisement
  1. Code
  2. Web Development

Bersenang-senang dengan jQuery template dan AJAX

Scroll to top
Read Time: 17 min

Indonesian (Bahasa Indonesia) translation by Yudha Zubair (you can also view the original English article)

Dalam tutorial ini, kita akan melihat bagaimana sistem template jQuery's beta dapat dimanfaatkan dengan baik untuk benar-benar decouple HTML kita dari skrip kami. Kami juga akan mengambil cepat melihat modul AJAX jQuery 1.5's dirombak.


Apa itu Templating?

Template adalah agak baru (masih dalam beta, sehingga mungkin sedikit berubah sebagai matang dan bermigrasi ke inti, tapi itu telah sekitar untuk bagian terbaik dari setahun), jQuery fiturnya sangat kuat yang memungkinkan kita untuk menentukan sebuah template digunakan ketika membangun DOM struktur melalui script, sesuatu yang saya yakin kita semua lakukan di hampir setiap hari.

Itu selalu menjadi sangat mudah dengan menggunakan jQuery untuk melakukan sesuatu seperti ini:

Template memungkinkan kita untuk menghapus string-based snippet HTML dari tingkah laku kita.

Ini hanya akan membungkus setiap elemen parent dari #someElement dalam <div> element yang baru Tidak ada yang salah terutama dengan melakukan hal ini; Hal ini sepenuhnya sah dan bekerja dengan baik dalam situasi yang tak terhitung jumlahnya. Tapi, itulah HTML script kami--konten bercampur dengan perilaku. Dalam contoh sederhana di atas itu bukanlah masalah besar, tetapi nyata skrip bisa berisi lebih banyak potongan HTML, terutama ketika membangun struktur DOM dengan data yang diperoleh melalui permintaan AJAX. Semuanya dapat dengan cepat menjadi berantakan.

Template memungkinkan kita untuk menghapus string-based potongan HTML dari lapisan perilaku, dan menempatkan mereka kembali dengan tegas di mana mereka berada dalam lapisan konten. Sementara kita lakukan itu, kami juga dapat memeriksa salah satu merek baru, super cool fitur AJAX jQuery 1.5 – defrred objek.


Persiapan

Dalam contoh ini, kita akan membangun sebuah Twitter widget yang akan tidak hanya memuat beberapa tweets terbaru kami, tetapi juga daftar beberapa teman, pengikut dan saran. Aku memilih Twitter untuk contoh ini karena itu output JSON dalam format kami memerlukan; sangat mudah dan menyenangkan.

Jadi mari kita mulai; widget itu sendiri akan dibangun dari berikut mark-up dasar:

UnstyledUnstyledUnstyled

Kami menggunakan HTML5 dan ,memasukan DOCTYPE dan meta charset elemen. Kami link ke kustom style sheet, yang kita akan membuat dalam sekejap, dan untuk mendukung versi terbaru IE8 dan bawah, kita menggunakan komentar bersyarat untuk link ke file html5shiv host oleh Google.

Menggunakan aside

Widget ini mungkin akan pergi ke sidebar, dan berbeda dari konten sebenarnya Halaman ini ditampilkan di, tapi berkaitan dengan situs secara keseluruhan. Dengan itu dalam pikiran, saya merasa <aside>adalah wadah luar yang tepat dalam kasus ini. Kami memberikan id untuk muda dipilih dan styling.

Melanjutkan dengan markup kami, kami memiliki beberapa rincian tentang pengguna Twitter tweets yang terdaftar, termasuk nama dalam<h2>, gambar dan bio dalam standar<p>. Merasa bebas untuk mengubah rincian Anda sendiri ketika merekonstruksi contoh. Kami bisa mendapatkan semua item dari panggilan JSON yang kami akan membuat ketika kita meminta data, namun, jika ada sedikit keterlambatan dalam permintaan pada load halaman, pengunjung bisa meninggalkan menatap pada sekelompok kotak kosong, jadi hard-coding info ini ke widget adalah lagi , sesuai. Jika kita membuat sebuah plugin untuk pengembang lain untuk dipakai, kita pasti tidak bisa melakukan ini, tetapi ketika menambahkan ini ke situs kita sendiri, atau situs klien tertentu, ini adalah pendekatan yang layak.

Selanjutnya, kami memiliki tab yang akan digunakan untuk beralih antara tweets, teman dan pengikutnya. Ini yang dibangun dari koleksi sederhana <ul>,<li>dan <a>elemen. Tab teman akan ditampilkan secara default, sehingga link untuk tab ini memiliki class akan melekat padanya. Dalam sebuah proyek yang lebih besar, kita tentu saja dapat menggunakan jQuery UI tab, tapi aku tidak ingin tutorial untuk kehilangan fokus, dan tidak repot-repot untuk menambahkan fungsi ini diri kita secara manual.

Perhatikan bahwa kita juga menggunakan plugin-ini adalah plugin tmpl (template), yang memberikan kita kemampuan untuk menggunakan jQuery template.

Akhirnya, kami memiliki unsur-unsur yang akan memegang setiap stream data; Kami memiliki sebuah wadah luar dengan id dari feed, dan tiga kontainer untuk tweets, teman dan pengikutnya masing-masing, yang juga memiliki atribut id untuk memilih mudah. Kami juga mencakup <noscript>elemen untuk pengunjung yang mungkin memiliki script dinonaktifkan (jika ada benar-benar ada lagi), yang merupakan dalam wilayah konten tab default. Perhatikan bahwa kita juga menggunakan plugin-ini adalah plugin tmpl (template), yang memberikan kita kemampuan untuk menggunakan jQuery template. File ini dapat didownload dari sini

Ambil salinan sekarang dan tetap dalam folder yang sama sebagai halaman web yang kami hanya dibuat.

Saya sebutkan kustom style sheet sebelumnya; Mari kita menambahkan bahwa dalam sekarang; dalam sebuah file baru dalam teks editor Tambahkan kode berikut:

Simpan file ini sebagai tweetbox.css di direktori yang sama sebagai halaman HTML. Ini adalah hanya sedikit tata letak styling untuk widget kami. Ada beberapa basa-basi CSS3 untuk mampu browser: beberapa tindakan rounded-corner (Perhatikan kita tidak lagi perlu awalan-webkit-vendor untuk rounded-corner dalam browser webkit terbaru!) dan beberapa gradien untuk tab. Titik untuk dicatat adalah bahwa kita menyembunyikan semua wadah dalam elemen feed, kecuali satu dengan class yang active. Saat ini (dan dengan JS disabled) widget akan terlihat seperti:


Menambahkan skrip

Mari kita menempatkan script dasar bersama-sama dan mendapatkan tab bekerja. Dalam file baru yang lain di editor teks Anda, tambahkan kode berikut:

Simpan file ini sebagai tweetbox.js di direktori yang sama sebagai halaman HTML. Itu semua cukup lurus ke depan, dan karena itu tidak benar-benar fokus utama dari tutorial ini, saya tidak akan membahas itu terlalu banyak. Semua yang kita lakukan adalah alias karakter string dalam fungsi anonim, yang kita mengeksekusi langsung - lebih untuk baik-praktek daripada semata-mata kebutuhan dalam contoh ini - dan kemudian cache pemilih untuk wadah luar utama untuk widget. Kami juga menginisialisasi tiga variabel untuk digunakan nanti, dan set nilai-nilai mereka ke null.

Kita harus memilih elemen berulang-ulang seluruh kode; Jadi caching referensi ke wadah luar membantu meminimalkan jumlah jQuery objek kita perlu buat. Kami kemudian menetapkan handler klik link tab yang mendapatkan id dari tab untuk menunjukkan dari href link yang diklik, menghilangkan nama on class pada dari link tab, dan kemudian menambahkan kembali ke link yang diklik. Kami kemudian menyembunyikan semua tab panel, sebelum menampilkan panel tab yang dipilih.


Mendapatkan Data

Sekarang keseruan yang asli dimulai; kita dapat membuat permintaan ke Twitter untuk mendapatkan kami tiga set data dan membuat menggunakan jQuery's template plugin untuk membuat elemen DOM yang diwajibkan menggunakan data yang kami peroleh dari request. Kita akan mendapatkan data pertama dan kemudian menambahkan template. Setelah klik-handler untuk tool link, tambahkan kode berikut:

Pertama, kami menggunakan jQuery's ajaxSetup() metode untuk mengatur opsi dataType jsonp untuk semua permintaan berikutnya. Karena hal ini dataType yang digunakan oleh masing-masing permintaan kami, masuk akal untuk hanya menetapkan opsi sekali.

Kita kemudian mendefinisikan tiga fungsi standar; dalam fungsi masing-masing kita menggunakan jQuery's ajax() metode untuk membuat permintaan ke layanan web yang mengembalikan masing-masing set data yang kita kerjakan dengan, user_timeline, friends dan followers masing-masing. Dalam pengaturan objek untuk setiap permintaan, kita mendefinisikan success handler yang akan dieksekusi sekali setiap permintaan individu berhasil dikembalikan. Masing-masing permintaan ini akan mengembalikan sebuah objek JSON yang berpotensi berisi hingga 100 objek dikemas penuh Twitter data.

Untuk memastikan bahwa data disimpan dalam format yang benar untuk JSON kami menggunakan notasi square-bracket.

Kita tidak perlu banyak data, sehingga dalam penangan success setiap kita menciptakan array baru, yang pada gilirannya akan berisi serangkaian objek menyimpan hanya data yang kita benar-benar akan digunakan. Untuk memastikan bahwa data disimpan dalam format yang benar untuk JSON, dimana setiap nama properti harus string, kita menggunakan square-bracket notasi untuk menetapkan nama properti dalam string format.

Permintaan user_timeline request menyimpan id string tweet yang dapat digunakan sebagai bagian dari URL yang mengarah pada tweet, serta menyimpan hasil dari dua fungsi utilitas. Yang pertama dari fungsi-fungsi ini menciptakan sebuah string diformat data yang mengubah kembalian oleh Twitter menjadi sesuatu yang sedikit lebih cantik, dan lokal ke viewer machine. Kami juga memformat teks tweet sehingga kita dapat atify setiap @usernames ditemukan dalam teks. Kita akan melihat tanggal dan tweet fungsi formatter segera.

Fungsi untuk mengambil daftar teman dan pengikutnya hampir identik. Sekali lagi, kami mengubah nama properti yang kami akan bekerja dengan ketika kita membangun objek kami dan menyimpannya dalam setiap array. Semua tiga success handler kami menyimpan array 5-item dihasilkan di null variabel yang kami ditetapkan di bagian atas script.

Perhatikan bahwa kita ingin memanggil getTweets(), getFriends() dan getFollowers() fungsi secara manual. Sebaliknya, kami menggunakan jQuery's when() metode baru untuk memanggil mereka semua pada waktu yang sama. Metode ini akan benar-benar menangani menjalankan fungsi-fungsi ini dan akan terus melacak jumlah ketika masing-masing telah kembali. Kami rantai metode then() setelah metode when(). Setelah semua fungsi tertentu telah berhasil dikembalikan, fungsi callback yang kita masukan ke metode then() yang akan dijalankan.

Metode when() menciptakan sebuah objek defferred yang mengelola fungsi kita menentukan sebagai argumen.

Setelah fungsi telah semua dikembalikan, objek deferred diselesaikan dan setiap fungsi yang terdaftar dengan then() dipanggil. Penangan lainnya juga dapat dikaitkan ke when() ditangguhkan objek, seperti fail(), yang akan dijalankan jika satu atau lebih dari fungsi dimasukan ke objek ditangguhkan gagal.

Ini luar biasa; Kami ingin membuat semua tiga permintaan, tetapi kita tidak punya cara untuk mengetahui terlebih dahulu yang ini akan dikembalikan terakhir, sehingga tidak mungkin untuk menggunakan fungsi callback satu permintaan apapun jika kita ingin memproses data kembali dari semua fungsi pada waktu yang sama. Di masa lalu, kami akan mungkin harus setup interval waktu berulang kali melakukan jajak pendapat masing-masing berfungsi untuk memeriksa apakah itu dikembalikan, dan menunggu sampai semua dari mereka telah sebelum melanjutkan. Sekarang kita dapat mendelegasikan semua manual ini pelacakan jQuery untuk menangani untuk kita secara otomatis.


Fungsi utilitas

Kami menggunakan dua fungsi utilitas dalam contoh ini: convertDate() dan breakTweet(). Kode untuk fungsi-fungsi ini adalah sebagai berikut:

Fungsi convertDate() relatif lurus ke depan: kita pertama Periksa apakah browser yang digunakan adalah varian dari IE dengan mencari window.ActiveXObject. Jika hal ini ditemukan, kita menggunakan metode replace() JavaScript untuk menghapus sedangkan Offset disediakan sebagai bagian dari string yang terkandung dalam created_at properti dari objek JSON yang dikembalikan oleh Twitter. Metode ini mengambil reqular expression untuk mencari, dan string kosong untuk menggantinya dengan. Ini berhenti IE tersedak + karakter ketika string dimasukan ke konstruktor new Date.

Selanjutnya kita menciptakan beberapa variabel; kami menetapkan array yang berisi nama-nama hari pendek, dengan minggu (atau Sun) sebagai item pertama dalam array. Hari tanggal JavaScript adalah zero-based, dengan minggu selalu muncul sebagai hari 0. Kami kemudian membuat objek Date menggunakan constructor new Date() , dan masukan dalam string tanggal yang disimpan di properti created_at objek yang kami dikirimkan ke fungsi.

Lalu kita membuat lain array yang berisi tiga item: item pertama mendapat hari yang betul minggu dari array pertama kami menciptakan dalam fungsi ini, item berikutnya akan tanggal lokal, dan mendapatkan item terakhir waktu lokal. Akhirnya, kita mengembalikan isi dari array setelah kami telah bergabung dengan itu. Kita hanya bisa menggunakan string concatenation untuk membangun string tanggal ini, tapi bergabung dengan array item jauh lebih cepat daripada bangunan string secara manual.

Fungsi breakTweet() sedikit lebih rumit. Apa yang perlu kita lakukan adalah mengubah teks ke dalam JSON array mana setiap item array adalah objek yang mengandung Name atau Text properti sehingga kita dapat menggunakan data dengan template (lebih pada template berikutnya). Pertama kita menyimpan teks dari objek yang dikembalikan oleh Twitter (yang kami masuken ke fungsi). Kami juga membuat array kosong untuk menyimpan objek dan menentukan regular expression yang akan cocok dengan @usernames.

Kami kemudian menguji teks untuk melihat apakah mengandung nama pengguna; Apakah kita kemudian memisahkan string teks pada setiap kemunculan username. Ini akan memberi kita sebuah array yang berisi item yang baik teks, atau username. Kami kemudian siklus melalui setiap item dalam array dan periksa apakah setiap item mengandung @ simbol; Jika tidak, kita tahu itu username dan jadi menyimpannya dalam sebuah objek dengan kunci Name. Jika tidak berisi simbol @ kita Simpan dengan key Text. Objek kemudian push ke dalam array. Juga, jika seluruh teks tidak mengandung karakter @ kita menyimpannya dengan key Text.

Hanya itu; sekali kita telah menyimpan objek kami fungsi mengembalikan array brokenTweet baru ke user_timeline success fungsi dan disimpan dalam objek JSON utama untuk digunakan dengan template kami. Serta atifying teks, kita juga bisa linkify dan hashify jika kita ingin. Aku akan meninggalkan itu terserah Anda untuk menerapkan.


Templating

Sekarang bahwa kita memiliki data JSON kami diproses, kita dapat melanjutkan ke bagian akhir dari contoh: templating. Dalam fungsi anonim dilewatkan ke metode then() di bagian kode terakhir, ada komentar dan tidak ada yang lain lagi. Langsung setelah komentar ini, tambahkan kode berikut:

Kode ini hanya berlaku template menggunakan jQuery template plugin metode tmpl(). Metode menerima JSON yang mengandung data yang akan menggunakan template. Kami kemudian menentukan mana dalam dokumen untuk memasukkan unsur-unsur template. Setiap set template menambahkan elemen wadah kosong masing-masing dalam widget. tmpl() metode ini memanggil pada tiga eleement, tetapi elemen-elemen belum ada. Kami akan menambahkan berikutnya ini.


Menambahkan jQuery template

Beralih kembali ke HTML dan pertama-tambahkan <script> element langsung setelah <ul> kosong dengan id tweetList

jQuery template ditambahkan ke HTML halaman menggunakan<script> Elemen-elemen ini harus memiliki atribut id. mengatur pada mereka sehingga mereka dapat dipilih dan memiliki tmpl() metode yang disebut pada mereka. Mereka juga harus memiliki jenis kustom x-jquery-tmpl ditetapkan pada mereka.

Pada template pertama, kita menambahkan mark-up yang kita inginkan untuk DOM struktur baru dibangun dari, yang dalam hal ini<li>, <p> dan <a>untuk membuat setiap tweet. Untuk memasukkan data dari objek JSON yang dikirimkan ke tmpl() metode kami menggunakan serangkaian template tag. Pertama kita menggunakan tag {{each}} untuk pergi melalui setiap item dalam array text.

Ini adalah array yang berisi tweet berpisaj, sehingga untuk setiap objek memeriksa apakah ini Name key; Apakah kita menggunakan tag {{tmpl}}, yang memungkinkan kita untuk menggunakan template bersarang. Kita menentukan data yang melewati fungsi bersarang dalam kurung setelah tmpl tag dan juga menetapkan id dari template untuk memilih (ini adalah kedua template yang kita baru saja ditambahkan, yang kita akan melihat secara lebih rinci dalam sekejap). Jika objek yang mengandung Name properti, kita tahu bahwa kita sedang menangani sebagian tweet teks biasa dan hanya memasukkan data menggunakan ${Text}. Bersyarat ini dicapai dengan menggunakan template tag {{else}}. Kita juga harus menutup bersyarat menggunakan {{/ if}, dan menutup menggunakan iterasi {{/each}}.

Akhirnya, kita membuat sebuah elemen anchor baru yang menghubungkan langsung ke tweet pada Twitter website menggunakan ${tweetlink} sebagai bagian dari href, dan properti ${timestamp}. Properti ini kami ciptakan dalam success handler untuk permintaan user_timeline.

Dalam atTemplate kita juga menciptakan link; kali ini link ke pengguna yang disebutkan. Karena ini adalah template bersarang, kita perlu mengakses data aktual sedikit berbeda; data yang dilewatkan ke dalam template bersarang oleh {{tmpl} tag akan disimpan dalam sebuah properti dari objek $item yang disebut data.

Kita masih perlu menambahkan template kami teman dan pengikutnya tab. Kedua akan dibangun dari template yang sama, yang harus sebagai berikut:

Template ini jauh lebih sederhana karena kami tidak menggunakan bersarang template atau lakukan setiap iterasi, kita sedang hanya memasukkan data dari setiap array JSON menggunakan format item template ${data}.


Menyelesaikan

Sekarang bahwa kita menerapkan template dan diisi widget kami, kita dapat menambahkan beberapa lebih banyak style CSS untuk membereskan element baru yang telah ditambahkan; dalam tweetbox.css Tambahkan kode berikut pada akhir file:

Menyimpan file, halaman kami seharusnya sekarang muncul sebagai berikut:

Masih ada satu hal lagi yang harus kita lakukan mungkin: saat ini, kami menciak format fungsi tidak bekerja di IE karena bagaimana IE memperlakukan metode regular exression split(). Untuk mengatasi masalah ini, kita dapat menggunakan patch JavaScript sangat baik yang dibuat oleh Steven Levithan. Dapat didownload dari: http://blog.stevenlevithan.com/archives/cross-browser-split dan dapat dimasukkan dalam halaman menggunakan komentar bersyarat dengan cara yang sama bahwa kita menambahkan html5shiv file:

Ini harus ditambahkan langsung sebelum script referensi ke file tweetbox.js kami.


Ringkasan

Dalam tutorial ini kita akan melihat beberapa fitur lebih maju jQuery template, seperti item iterasi dengan {{each}} dan conditional dengan {{if}} dan {{else}}.

Titik kunci adalah bahwa sistem template baru dari jQuery memungkinkan kita untuk lebih baik terpisah lapisan kami perilaku dan presentasi, bergerak semua cuplikan kode HTML dari .js file dan kembali ke .html file.

Beberapa mungkin berpendapat bahwa kita sekarang hanya memiliki situasi sebaliknya dan hanya memiliki lebih<script>

Namun, saya pikir ini jauh lebih baik daripada alternatif. Unsur-unsur dalam format $("<div>") adalah cukup string dengan tidak berarti implisit (sampai jQuery dijalankan oleh browser dan mereka dibuat dan dimasukkan ke dalam DOM).</div>

Kami juga melihat metode when() baru hebat yang disediakan dalam jQuery 1.5, yang memungkinkan kita untuk mengelola serangkaian permintaan asynchronous dan mengeksekusi kode setelah mereka telah menyelesaikan. Ini melibatkan menggunakan metode then() untuk menetapkan fungsi untuk menjalankan setelah fungsi yang asynchronous semua kembalikan.

Terima kasih banyak sudah membaca dan biarkan aku tahu jika Anda memiliki pertanyaan!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.