Pilih Perpustakaan yang Benar
Sangat sulit untuk membuat aplikasi JS tanpa alat yang bagus. JQuery hanyalah perpustakaan untuk pengoperasian DOM dan tidak memberikan dasar apa pun untuk membuat aplikasi. Inilah sebabnya kami menginginkan perpustakaan khusus yang mirip dengan CANJS.
CANJS adalah perpustakaan MVC ringan yang menyediakan alat yang Anda butuhkan untuk membuat aplikasi JS.
CANJS adalah perpustakaan MVC ringan yang menyediakan alat yang Anda butuhkan untuk membuat aplikasi JS. Ini menyediakan kerangka dasar dengan mode MVC (model-view-control), pengikatan template dinamis, dukungan rute dan keamanan memori. Ini juga mendukung JQuery, Zepto, Mootools, Yui, Dojo, dan memiliki ekstensi dan plug-in yang kaya.
Bagian Satu Anda akan Pelajari:
Buat Lapisan Kontrol dan Lihat (Templat UI) untuk menampilkan kontak
Gunakan model model model untuk mewakili data
Gunakan plugin Fixtures untuk mensimulasikan AJAX untuk mengembalikan data
Anda harus bersemangat! Mari kita mulai mengkode.
Buat folder dan html Anda
Anda pertama kali membuat folder untuk aplikasi Anda, dan kemudian membuat 4 subfolder di direktori: CSS, JS, Views dan IMG. sebagai berikut:
contacts_manager
CSS
JS
tampilan
img
Simpan kode berikut sebagai index.html:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title> CANJS Contacts Manager </iteme>
<tautan rel = "stylesheet" href = "css/bootstrap.min.css">
<tautan rel = "stylesheet" href = "css/contacts.css">
</head>
<body>
<div>
<div>
<div>
<H1> Kontak Manajer </h1>
</div>
</div>
<div>
<div>
<div>
<nav id = "filter"> </av>
</div>
</div>
<div>
<Div id = "create"> </div>
<Div ID = "Kontak"> </Div>
</div>
</div>
</div>
<skrip src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> </script>
<skrip src = "js/can.jQuery.min.js"> </script>
<skrip src = "js/can.fixture.js"> </script>
<Script src = "js/contacts.js"> </script>
</body>
</html>
Di bagian bawah halaman Anda memuat JS yang diperlukan (termasuk aplikasi Anda: contacts.js).
CSS dan file gambar yang digunakan dalam tutorial dapat diunduh.
Gunakan tampilan untuk membuat UI Anda
View digunakan untuk membuat template UI aplikasi Anda. CANJS mendukung berbagai mesin template. Artikel ini menggunakan EJS, yang mencakup dan mendukung pengikatan dinamis.
Tag templat EJS sangat mirip dengan HTML dan dukungan yang berisi kode JS. Tiga tag yang umum digunakan adalah sebagai berikut:
< % Kode %> Jalankan JS
< %= Kode %> Jalankan JS dan tulis hasil yang tidak ditutup ke HTML di lokasi saat ini
< %== Kode %> Jalankan JS dan tulis hasil yang melarikan diri ke HTML di lokasi saat ini (untuk sub-templat).
Templat dapat dimuat dari file atau tag skrip, dan tutorial ini dimuat dari file EJS.
Tampilkan kontak
Untuk membuat kontak, Anda harus membuat template EJS terlebih dahulu dan menyimpan kode berikut sebagai contactslist.ejs ke folder tampilan Anda:
Salinan kode adalah sebagai berikut:
<ul>
< % daftar (kontak, fungsi (kontak) { %>
<li < %= (el)-> el.data ('contact', contact) %>>
<%== can.view.render ('view/contactView.ejs', {
Kontak: Kontak, Kategori: Kategori
}) %>
</li>
< %}) %>
</ul>
ContactLists.EJS akan membuat daftar kontak. Mari kita analisis template ini:
Salinan kode adalah sebagai berikut:
< % daftar (kontak, fungsi (kontak) { %>
Jika metode callback dalam metode daftar () digunakan bersama dengan daftar dengan pengamat, itu akan disebut berulang kali menggunakan ikatan dinamis setelah data daftar berubah.
Salinan kode adalah sebagai berikut:
<li < %= (el)-> el.data ('contact', contact) %>>
Kode di atas menghasilkan <li> dengan data kontak melalui metode panggilan balik elemen. Setelah metode setelah panah dieksekusi, data objek EL diatur ke elemen yang sesuai.
Salinan kode adalah sebagai berikut:
<%== can.view.render ('view/contactView.ejs', {
Kontak: Kontak, Kategori: Kategori
}) %>
Kode di atas menjadikan Sub-Template ContactView.EJS menjadi orang kontak. can.view.render () Mengembalikan HTML dengan templat dan data sebagai parameter.
Membuat satu kontak
Sub-templat adalah cara yang baik untuk mengatur tampilan menjadi blok yang dapat dikelola. Ini juga membuat templat Anda sederhana dan mudah digunakan kembali. Template ini akan digunakan nanti di tutorial untuk membuat kontak, menyimpan kode berikut sebagai contactView.ejs dan masukkan folder tampilan:
Salinan kode adalah sebagai berikut:
<a href = "javascript: //"> <i> </i> </a>
<sorm>
<div>
<div>
<img src = "img/contact.png">
</div>
<div>
<input type = "text" name = "name" placeholder = "tambahkan nama"
<%= contact.attr ('name')? "value = '" + contact.name + "'": "class = 'kosong'" %>>
<Pilih Nama = "Kategori">
< % $ .Each (kategori, fungsi (i, kategori) { %>
<nilai opsi = "<%= kategori.data%>" <%= contact.category === Category.data? "Dipilih": "" %>>
< %= Category.Name %>
</potion>
< %}) %>
</pilih>
</div>
<div>
<label> alamat </label>
<input type = "text" name = "alamat"
<%= contact.attr ('alamat')? "value = '" + contact.address + "'": "class = 'kosong'" %>>
<label> Telepon </label>
<input type = "text" name = "phone"
<%= contact.attr ('phone')? "value = '" + contact.phone + "'": "class = 'kosong'" %>>
<label> email </label>
<input type = "text" name = "email"
<%= contact.attr ('email')? "value = '" + contact.email + "'": "class = 'kosong'" %>>
</div>
</div>
</form>
Atribut kontak ditempatkan di tag <sput>, yang memungkinkan Anda untuk mengedit dan memperbarui informasi pengguna.
Revitalisasi pandangan Anda (literatur yang bagus ..)
Jika attr () digunakan selama templat pemrosesan EJS, kode di sekitarnya akan diserahkan ke prosesor acara untuk memantau perubahan atribut yang sesuai. Ketika atribut berubah, UI terkait dalam aplikasi akan diperbarui. Fungsi ini mendapat manfaat dari mekanisme pengikatan dinamis template. EJS Dynamic Binding selektif dan hanya akan diaktifkan untuk atribut yang sesuai ketika attr () digunakan.
Kami menggunakan tag <Input> di contactView.ejs untuk memahami penggunaannya:
Salinan kode adalah sebagai berikut:
<input type = "text" name = "name" placeholder = "tambahkan nama"
<%= contact.attr ('name')? "value = '" + contact.name + "'": "class = 'kosong'" %>>
Kode dalam tag khusus akan dikonversi menjadi suatu acara dan terikat pada atribut nama kontak ini. Ketika atribut nama berubah, acara akan dipicu dan struktur HTML akan diperbarui.
Gunakan can.Control untuk menangani logika bisnis
Can.Control membuat kontrol penuh yang terorganisir, bebas bocor secara internal, yang dapat digunakan untuk membuat widget atau menangani logika bisnis. Anda membuat instance kontrol untuk elemen DOM melalui data yang diperlukan, dan Anda dapat mendefinisikan peristiwa pengikatan metode dalam kontrol Anda.
Ketika elemen yang terkait dengan kontrol dihapus dari DOM, kontrol akan menghancurkan dirinya sendiri dan menghapus metode terikat.
Untuk membuat kontrol, wariskan dengan meneruskan objek yang Anda definisikan berisi fungsi ke can.control (). Insiden berikutnya juga dilaporkan.
Setiap instance kontrol memiliki beberapa nilai penting dan spesifikasi metode:
Referensi untuk contoh kontrol ini
Elemen DOM yang Anda buat dalam instance ini
ini. Option Parameter objek yang diperlukan untuk membuat instance
init () dipanggil saat instance dibuat dengan sukses
Mengelola kontak
Tambahkan cuplikan kode berikut ke file contacts.js untuk membuat kontrol untuk mengelola kontak:
Salinan kode adalah sebagai berikut:
Kontak = can.control ({
init: function () {
this.element.html (can.view ('views/contactslist.ejs', {
Kontak: this.options.contacts,
Kategori: this.options.categories
}));
}
})
Ketika sebuah instance kontak dibuat, init () melakukan dua hal:
Gunakan can.view () untuk membuat kontak. can.view () menerima dua parameter: file yang berisi templat dan data atau tag strip; Ini mengembalikan DocumentFragment (wadah ringan yang mengelola elemen DOM).
Gunakan jQuery.html () untuk memasukkan DocumentFragment dari can.view () ke dalam elemen kontrol
Gunakan model untuk mewakili data
Model adalah lapisan abstrak data aplikasi. Aplikasi ini menggunakan dua model: satu sesuai dengan orang kontak dan yang lainnya sesuai dengan kategori. Tambahkan kode berikut ke contacts.js:
Salinan kode adalah sebagai berikut:
Contact = can.model ({
FindAll: 'Get /Contacts',
Buat: "Posting /Kontak",
UPDATE: "Letakkan /kontak /{id}",
Hancurkan: "Hapus /Kontak /{ID}"
}, {});
Kategori = can.model ({
FindAll: 'Get /Categories'
}, {});
Model memiliki 5 metode yang dapat mendefinisikan data CRUD, yaitu FindAll, FindOne, Buat, Perbarui, dan Hancurkan. Anda dapat menulis ulang metode ini, tetapi cara terbaik adalah dengan menggunakan layanan istirahat (transfer negara representasional). Sama seperti kode di atas, Anda dapat khawatir tentang mengabaikan metode statis yang tidak akan digunakan dalam aplikasi.
Penting untuk menunjukkan di sini bahwa contoh model sebenarnya 'dapat diamati' dari CANJS. can.observe memberikan pola pengamat suatu objek can.observe.list memberikan pola pengamatan suatu array. Ini berarti Anda bisa mendapatkan dan mengatur data melalui attr () sambil mendengarkan perubahan data.
Metode findAll () mengembalikan model.list, yang merupakan peristiwa yang dipicu oleh can.observe.list ketika elemen ditambahkan atau dihapus.
Gunakan fixture untuk meniru istirahat
Fixture mencegat permintaan AJAX dan mensimulasikan respons melalui file atau metode. Ini sangat berguna untuk pengujian, atau ketika backend tidak siap. Fixture adalah apa yang model aplikasi mensimulasikan istirahat.
Pertama, Anda perlu menyiapkan beberapa data ke fixture dan menambahkan kode berikut ke:
Salinan kode adalah sebagai berikut:
var kontak = [
{
ID: 1,
Nama: 'William',
Alamat: '1 CANJS Way',
Email: '[email protected]',
Telepon: '0123456789',
Kategori: 'rekan kerja'
},
{
ID: 2,
Nama: 'Laura',
Alamat: '1 CANJS Way',
Email: '[email protected]',
Telepon: '0123456789',
Kategori: 'Teman'
},
{
ID: 3,
Nama: 'Lee',
Alamat: '1 CANJS Way',
Email: '[email protected]',
Telepon: '0123456789',
Kategori: 'Keluarga'
}
];
VAR Kategori = [
{
ID: 1,
Nama: 'Keluarga',
Data: 'Keluarga'
},
{
ID: 2,
Nama: 'Teman',
Data: 'Teman'
},
{
ID: 3,
Nama: 'rekan kerja',
Data: 'rekan kerja'
}
];
Dengan data, sambungkan ke fixture untuk mensimulasikan istirahat. can.fixture () menerima dua parameter. URL yang ingin kami integer dan file dan metode yang kami tanggapi. Biasanya URL yang ingin Anda intersep adalah dinamis dan mengikuti suatu pola. Cukup tambahkan wildcard yang terlampir dengan {} di URL.
Tambahkan kode berikut ke contacts.js:
Salinan kode adalah sebagai berikut:
can.fixture ('get /contacts', function () {
mengembalikan [kontak];
});
var id = 4;
can.fixture ("post /contacts", function () {
return {id: (id ++)}
});
can.fixture ("put /contacts /{id}", function () {
kembali {};
});
can.fixture ("hapus /kontak /{id}", function () {
kembali {};
});
can.fixture ('get /categories', function () {
mengembalikan [kategori];
});
Empat perlengkapan pertama mensimulasikan tanggapan GET, POSE, PUT dan Hapus dari model kontak, dan yang kelima mensimulasikan respons GET dari model kategori.
Mulai aplikasi
Aplikasi Anda memiliki model yang mengelola data, membuat tampilan kontak, dan mengatur semua ini menjadi kontrol. Yang harus Anda lakukan sekarang adalah memulai aplikasi. Sekarang Anda perlu memulai aplikasi!
Tambahkan kode berikut ke contacts.js:
Salinan kode adalah sebagai berikut:
$ (dokumen) .ready (function () {
$. WHEN (Category.Findall (), contact.findall ()). Kemudian (
function (CategoryResponse, Contactresponse) {
VAR Categories = CategoryResponse [0],
kontak = contactresponse [0];
kontak baru ('#kontak', {
Kontak: Kontak,
Kategori: Kategori:
});
});
});
Mari kita analisis kode ini:
Salinan kode adalah sebagai berikut:
$ (dokumen) .ready (function () {
Gunakan metode jQuery.eady untuk mendengarkan dom.
Salinan kode adalah sebagai berikut:
$. WHEN (Category.Findall (), contact.findall ()). Kemudian (
function (CategoryResponse, Contactresponse) {
Hubungi metode FindAll () dari dua model untuk mendapatkan jenis semua kontak. Karena FindAll () memiliki keterlambatan, $ .shen () memastikan bahwa metode callback dieksekusi hanya setelah dua permintaan diselesaikan pada saat yang sama.
Salinan kode adalah sebagai berikut:
VAR Categories = CategoryResponse [0],
kontak = contactresponse [0];
Dapatkan dataset dari contoh model yang sesuai dari dua metode FindAll (). adalah elemen pertama dari array yang dikembalikan oleh respons.
Salinan kode adalah sebagai berikut:
kontak baru ('#kontak', {
Kontak: Kontak,
Kategori: Kategori:
});
Membuat Kontrol Kontak untuk Elemen #Contacts. Dataset kontak dan ketik dikirim ke kontrol.
Buka aplikasi Anda dengan browser dan Anda akan melihat daftar kontak berikut:
Meringkaskan
Ini adalah bab pertama dalam seri tutorial, dan Anda telah belajar tentang inti CANJ:
Model lapisan abstraksi data aplikasi Anda
Melihat templat yang mengubah data menjadi html
Mengontrol organisasi berkaitan dengan segalanya