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

Menyelam ke dalam CanJS

by
Read Time:9 minsLanguages:

Indonesian (Bahasa Indonesia) translation by nila sardi (you can also view the original English article)

Jika Anda belum pernah mendengar, ada anak baru di kota: CanJS. Apa cara yang lebih baik untuk menyelam ke dalam apa menawarkan kerangka kerja ini baru daripada untuk membangun aplikasi yang manajer kontak? Ketika Anda selesai dengan seri tiga-bagian ini, Anda akan memiliki semua alat yang Anda butuhkan untuk membangun aplikasi JavaScript Anda sendiri!


Memilih alat kanan

Membangun aplikasi JavaScript tanpa alat yang tepat sulit. Sementara jQuery besar pada apa yang dilakukannya, Perpustakaan DOM manipulasi tidak menyediakan infrastruktur untuk membangun aplikasi. Ini adalah khusus mengapa Anda perlu menggunakan Perpustakaan, seperti CanJS.

CanJS adalah Perpustakaan MVC ringan yang memberikan Anda alat yang Anda butuhkan untuk membangun aplikasi JavaScript.

CanJS adalah Perpustakaan MVC ringan yang memberikan Anda alat yang Anda butuhkan untuk membangun aplikasi JavaScript. Menyediakan semua struktur pola MVC (Model-View-Control), template dengan hidup dukungan mengikat, routing dan aman memori. Mendukung jQuery, Zepto, Mootools, YUI, Dojo dan memiliki seperangkat ekstensi dan plugin.

Pada bagian satu, Anda akan:

  • Membuat kontrol dan View (sisi klien template) untuk menampilkan kontak
  • Mewakili data menggunakan model
  • Mensimulasikan tanggapan ajax menggunakan plugin perlengkapan

Bersemangat? Anda harus! Sekarang mari kita mendapatkan pengkodean.


Mengatur folder dan HTML

Anda akan perlu untuk membuat folder untuk aplikasi Anda. Di dalam folder ini, Anda memerlukan empat sub folder: css, js, pemandangan dan img. Struktur folder Anda akan terlihat seperti ini ketika Anda sudah selesai:

  • contacts_manager
    • CSS
    • JS
    • pemandangan
    • img

Simpan ini sebagai index.html:

Di bagian bawah halaman, kami memuat jQuery, CanJS, fixture plugin dan kode aplikasi Anda (contacts.js).

CSS dan gambar untuk tutorial ini di disertakan dalam file sumber, yang dapat didownload di atas.

Bangunan UI dengan pemandangan

Pandangan yang sisi klien template yang digunakan untuk membuat bagian dari Anda app. CanJS mendukung beberapa bahasa template, tetapi tutorial ini akan menggunakan EJS (Embedded JavaScript), yang dikemas dengan CanJS dan mendukung mengikat hidup.

EJS template terlihat seperti HTML, tetapi dengan sihir Tag di mana Anda ingin perilaku dinamis (menggunakan JavaScript). Ada tiga jenis sihir Tag di EJS:

  • menjalankan kode JavaScript,
  • menjalankan pernyataan JavaScript, dan menulis hasil lolos ke HTML dihasilkan,
  • menjalankan pernyataan JavaScript dan menulis hasil unescaped ke HTML dihasilkan (digunakan untuk sub template).

Template dapat dimuat dari berkas atau script tag. Dalam tutorial ini template akan dimuat dari berkas EJS.


Menampilkan kontak

Untuk membuat kontak, Anda akan memerlukan EJS template. Simpan kode berikut sebagai contactsList.ejs dalam folder dilihat:

contactLists.ejs akan membuat daftar kontak. Mari kita periksa kode template di sini secara lebih rinci:

EJS list() penolong memanggil fungsi panggilan balik pada setiap kontak dalam daftar. Ketika digunakan dengan daftar diamati, penolong list() akan menggunakan hidup mengikat untuk kembali menjalankan waktu panjang daftar perubahan.

Kode di atas menggunakan elemen callback untuk menambahkan contoh kontak ke data<li>. Semuanya setelah panah dibungkus dalam fungsi yang akan dijalankan dengan el diatur ke elemen saat ini.</li>

Kode ini menjadikan contactView.ejs sub template untuk setiap kontak. Can.View.render() mengambil template dan data sebagai parameter dan kembali HTML.


Rendering tunggal kontak

Sub template adalah cara terbaik untuk mengatur pandangan Anda ke dalam potongan-potongan dikelola. Mereka juga membantu menyederhanakan template Anda dan mempromosikan DRY (tidak mengulangi sendiri). Kemudian dalam tutorial ini, Anda akan kembali menggunakan template ini untuk membuat kontak. Simpan kode ini sebagai contactView.ejs dalam folder dilihat:

Masing-masing properti kontak ditempatkan di<input>Tag. Ini akan digunakan untuk menambahkan dan memperbarui informasi kontak.


Membuat pandangan Anda hidup

Setiap saat EJS pertemuan attr() saat memproses template, ia tahu bahwa kode sekitarnya harus berubah menjadi sebuah event handler yang terikat properti itu perubahan. Ketika properti lain berubah di app, event handler dipicu dan UI Anda akan diperbarui. Ini dirujuk sebagai mengikat hidup. Mengikat EJS Live opt-in. Itu hanya menyala jika Anda menggunakan attr() untuk akses properti.

Mari kita lihat pada salah satu<input>Tag dari contactView.ejs untuk melihat bagaimana ini bekerja:

Kode dalam tag sihir akan menjadi sebuah event handler yang terikat ke kontak nama properti. Ketika kami memperbarui nama properti, event handler dijalankan dan HTML akan diperbarui.


Mengorganisir dapat menggunakan logika aplikasi. Kontrol

dapat. Kontrol menciptakan terorganisir, kebocoran memori gratis, stateful kontrol yang dapat digunakan untuk membuat widget atau mengatur logika aplikasi. Anda membuat sebuah instance kontrol pada sebuah elemen DOM dan menyebarkannya data kontrol Anda akan butuhkan. Anda dapat menentukan sejumlah fungsi dalam kendali Anda dan mengikat ke acara.

Ketika elemen kontrol Anda pasti akan dihapus dari DOM, kontrol menghancurkan dirinya sendiri, membersihkan setiap terikat event handler.

Untuk membuat kontrol baru, memperluas dapat. Control() melewati sebuah obyek yang mengandung fungsi Anda ingin mendefinisikan. Dalam bagian kedua, event handler akan dilewatkan di juga.

Ada beberapa variabel penting dan fungsi hadir dalam setiap contoh kontrol:

  • ini - sebuah referensi untuk contoh kontrol
  • This.Element - The DOM elemen yang Anda buat contoh pada
  • This.Options - sebuah obyek yang mengandung data yang dilewatkan ke contoh ketika itu diciptakan
  • init () - disebut ketika instance dibuat

Mengatur kontak

Tambahkan potongan berikut ke file contacts.js untuk membuat kontrol yang akan mengelola kontak:

Ketika sebuah instance dari kontak dibuat, init () akan melakukan dua hal:

  1. Menggunakan can.view() untuk membuat kontak. Can.View() menerima dua parameter: file atau id tag script yang mengandung kode template dan data kami. Itu kembali hasilnya diberikan sebagai documentFragment (wadah ringan yang dapat menahan unsur-unsur DOM).
  2. Menyisipkan documentFragment dari can.view() ke elemen kontrol menggunakan jQuery's .html().

Mewakili Data menggunakan model

Model abstrak lapisan data aplikasi. Dua model yang diperlukan dalam aplikasi ini: satu untuk kontak dan satu untuk kategori. Tambahkan kode ini ke contacts.js:

Model memiliki lima metode statis yang Anda dapat menentukan untuk membuat, mengambil, update dan Hapus data. Mereka adalah findAll, findOne, membuat, memperbarui dan menghancurkan. Anda dapat menimpa fungsi-fungsi ini untuk bekerja dengan setiap back-end, tetapi cara termudah untuk menentukan Model menggunakan layanan lainnya, sebagai dicontohkan dalam kode di atas. Anda dapat dengan aman mengabaikan metode statis yang tidak digunakan dalam aplikasi.

Hal ini penting untuk menunjukkan di sini bahwa instance model di CanJS yang benar-benar apa yang kita sebut 'observables'. dapat. Mengamati menyediakan pola diamati untuk objek dan dapat. Observe.List menyediakan pola diamati untuk array. Ini berarti Anda bisa mendapatkan dan menetapkan properti menggunakan attr() dan mengikat untuk perubahan dalam properti tersebut.

Metode findAll() kembali Model.list, yang dapat. Observe.List yang memicu peristiwa ketika elemen ditambahkan atau dihapus dari daftar.


Simulasi layanan lain menggunakan perlengkapan

Perlengkapan mencegat permintaan AJAX dan mensimulasikan tanggapan mereka dengan file atau fungsi. Ini fantastis untuk pengujian, prototyping, atau Kapan back-end belum siap. Perlengkapan yang diperlukan untuk mensimulasikan seluruh layanan model dalam aplikasi ini menggunakan.

Tapi pertama, Anda akan memerlukan beberapa sample data untuk perlengkapan untuk menggunakan. Tambahkan kode berikut untuk contacts.js:

Sekarang bahwa Anda memiliki beberapa data, Anda perlu kawat itu ke jadwal sehingga Anda dapat mensimulasikan seluruh layanan. Can.fixture() mengambil dua parameter. Yang pertama adalah URL yang kita inginkan untuk mencegat dan yang kedua adalah file atau fungsi yang digunakan untuk menghasilkan respon. Sering URL yang Anda inginkan untuk mencegat dinamis dan mengikuti pola. Dalam kasus ini, Anda harus menggunakan kerangka URL. Cukup tambahkan kurung kurawal ke URL yang mana Anda ingin untuk mencocokkan wildcard.

Tambahkan baris berikut ke contacts.js:

Perlengkapan empat mensimulasikan mendapatkan, posting, memasukkan dan menghapus tanggapan untuk model kontak, dan perlengkapan kelima mensimulasikan mendapatkan respon untuk model kategori.


Bootstrap aplikasi

Aplikasi Anda memiliki model untuk data Anda, pemandangan untuk membuat kontak, dan kontrol untuk menghubungkan segala sesuatu. Sekarang Anda perlu untuk kickstart aplikasi!

Menambahkan ini ke contacts.js file:

Mari kita lihat lebih dekat pada apa yang terjadi dalam kode ini:

Menunggu untuk DOM untuk siap menggunakan jQuery's dokumen siap fungsi.

Panggilan findAll() kedua model untuk mengambil semua kontak dan kategori. Sejak findAll() kembali tangguhan, $.when() digunakan untuk membuat permintaan kedua secara paralel dan menjalankan panggilan balik ketika mereka selesai.

Dapatkan daftar instance model dari respon dari dua findAll() panggilan. Tanggapan adalah array, dengan indeks pertama yang menjadi daftar instance model yang diperoleh.

Membuat sebuah instance kontrol kontak pada elemen #contacts. Daftar kontak dan kategori akan dioper ke dalam kontrol.

Ketika Anda menjalankan aplikasi Anda di browser, Anda akan melihat daftar kontak:


Membungkus

Yang melakukannya untuk bagian satu dari seri ini! Anda telah diperkenalkan ke inti dari CanJS:

  • Model abstrak lapisan data dalam aplikasi Anda
  • Pandangan yang template yang mengubah data ke dalam HTML
  • Kontrol kawat segala sesuatu.

Dalam pelajaran berikutnya, Anda akan membuat kontrol dan pemandangan untuk menampilkan kategori dan menggunakan perutean ke kontak filter. Harapan untuk melihat Anda di sana!

Pertanyaan? Minta pergi di bawah ini! Tidak sabar untuk mempelajari lebih lanjut? Bagian kedua dari seri telah diposting di sini!

Advertisement
Did you find this post useful?
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.