Model
Mengenai tulang punggung, yang paling mendasar adalah model. Hal ini seperti model pemetaan database dalam pengembangan back-end. Ini juga merupakan model objek data, dan harus memiliki atribut yang sama dengan model di back-end (hanya atribut yang perlu dioperasikan melalui front-end).
Mari kita lihat apa model backbone dari contoh langkah demi langkah.
Pertama -tama tentukan halaman HTML:
<! Doctype html> <html> <head> <title> the5fire-backbone-model </iteme> </head> <body> </body> <script src = "http://ajax.googleapis.com/ajax/libs/jQuery/1.4.4/jquery.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <skrip src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <skrip src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <skrip src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </script> <script> (function ($) {/***Menempatkan kode di sini **/}) (jQuery); </skrip> </htmKode berikut perlu diisi dalam fungsi dalam tag skrip HTML ini.
1. Objek paling sederhana
Man = backbone.model.extend ({initialize: function () {alert ('hey, Anda membuat saya!');}}); Var man = man new man;Ini sangat sederhana. Ada juga presentasi model di HelloWorld, tanpa mendefinisikan atribut. Ini adalah metode selama inisialisasi, atau konstruktor.
2. Dua metode penugasan objek
Yang pertama adalah mendefinisikan secara langsung dan mengatur nilai default.
Man = backbone.model.extend ({initialize: function () {alert ('hey, Anda membuat saya!');}, Default: {name: 'zhang san', usia: '38'}}); var man = new man; waspada (man.get ('name'));Tipe kedua didefinisikan saat menetapkan
Man = backbone.model.extend ({initialize: function () {alert ('hey, Anda membuat saya!');}}); Man.set ({name: 'the5fire', usia: '10 '}); waspada (man.get (' name '));Saat menggunakan nilai GET, dapatkan digunakan.
3. Metode dalam objek
Man = backbone.model.extend ({initialize: function () {alert ('hey, you create me!');}, Default: {name: 'zhang san', usia: '38'}, sekitar saya: function () {return 'name my' + this.get ('name') + ', tahun ini. Manusia; waspada (man.aboutme ());4. Dengarkan perubahan atribut dalam objek
Man = backbone.model.extend ({initialize: function () {alert ('hey, you create me!'); // ikat mendengarkan selama inisialisasi this.bind ("ubah: name", function () {var name = this.get ("name"); waspada ("Anda mengubah atribut nama ke:" + name);});}, "name"); name: name: {name:},},},},},},},}, " tentangMe: function () {return 'My Name is' + this.get ('name') + ', tahun ini' + this.get ('usia') + 'tahun'; var man = new man; man.set ({name: 'the5fire'}) // memicu acara perubahan terikat, peringatan.5. Tambahkan aturan verifikasi ke permintaan objek dan kesalahan
Man = backbone.model.extend ({initialize: function () {alert ('hey, Anda membuat saya!'); // ikat mendengarkan selama inisialisasi this.bind ("ubah: name", function () {var name = this.get ("name"); ware ("You mengubah atribut nama ke:" + name);}); ini ("name"); ALERT ("You mengubah nama atribut ke:" + name);}); this ("name"); ALERT ("YOU UNTER NAME ATTRIBUT TO:" + NAME);}); this); BID (BIBIND); }, default: {name: 'zhang san', usia: '38'}, validasi: function (atribut) {if (atribute.name == '') {return "name tidak dapat kosong!"; }}); var man = new man; man.set ({name: ''}); // Menurut aturan verifikasi, pesan kesalahan muncul.6. Akuisisi dan penyimpanan objek memerlukan dukungan sisi server untuk diuji.
Pertama, Anda perlu mendefinisikan atribut URL untuk objek. Saat memanggil metode Simpan, semua atribut objek akan diposting ke server.
Man = backbone.model.extend ({url: '/save/', initialize: function () {alert ('hey, Anda membuat saya!'); // ikat mendengarkan selama inisialisasi this.bind ("ubah: name", function () {var name = this.get ("name"); warind ("Anda mengubah atribut nama ke:" + {var name = this.get ("name"); warind ("Anda mengubah atribut nama ke:" + name) (ini); waspada);}); 'Tahun';}}); var man = new man ;; man.set ({name: 'the5fire'}); man.save (); // Posting akan dikirim ke URL yang sesuai dengan model, dan format data adalah json {"name": "the5Fire", "Age": 38} // Kemudian dapatkan data dari sisi server menggunakan metode fetch ([opsi]) var man1 = baru; Dapatkan atau posting di sisi server. man1.fetch (); // dalam kasus kedua, tambahkan parameter untuk mengambil, sebagai berikut: man1.fetch ({url: '/getMans/'}); // Dengan cara ini, permintaan GET akan dikirim ke URL/GetMans/. // Gaya hasil yang dikembalikan oleh server harus menjadi data format JSON yang sesuai, sama seperti format pos saat menyimpan. // Namun, metode menerima data yang dikembalikan oleh server adalah sebagai berikut: man1.fetch ({url: '/getMans/', success: function (model, response) {alert ('success'); // model adalah apa pun yang akan dikembalikan (Model.get ('name'));}, error: function () {// ketika pembentukan pengembalian. alert ('error');}});Catatan: Kode di atas hanya kode yang dapat dieksekusi secara normal, tetapi akan ada contoh tentang sisi server nanti.
Harus ditambahkan di sini bahwa operasi asinkron dari server diselesaikan melalui metode backbone.sync. Saat memanggil metode ini, parameter akan diteruskan secara otomatis dan permintaan yang sesuai akan dikirim ke server sesuai dengan parameter. Misalnya, jika Anda menyimpan dan tulang punggung akan menentukan apakah objek Anda baru. Jika baru dibuat, parameternya dibuat. Jika itu adalah objek yang ada, itu hanya diubah, maka parameternya diperbarui. Jika Anda memanggil metode fetch, parameter dibaca. Jika itu adalah wadah, maka parameternya dihapus. Artinya, yang disebut crud ("create", "baca", "update", atau "delete"), dan tipe permintaan yang sesuai dengan keempat parameter ini adalah posting, dapatkan, put, dan hapus. Anda dapat membuat operasi CRUD yang sesuai di server berdasarkan jenis permintaan ini.
Catatan:
Mengenai URL dan Urlroot, jika Anda mengatur URL, CRUD Anda akan mengirimkan permintaan yang sesuai ke URL ini. Namun, masalah lain adalah bahwa permintaan penghapusan dikirim, tetapi tidak ada data yang dikirim. Maka Anda tidak tahu objek (catatan) mana yang harus dihapus di sisi server. Jadi di sini ada konsep urlroot lainnya. Setelah Anda mengatur urlroot, ketika Anda mengirim dan menghapus permintaan, alamat URL dari permintaan adalah: /BaseUrl/#Model.id], sehingga Anda dapat memperbarui atau menghapus objek (catatan) yang sesuai dengan mengekstraksi nilai setelah URL di sisi server.
Koleksi
Koleksi adalah kumpulan objek model yang dipesan. Sangat mudah untuk memahami konsepnya. Jika Anda melihatnya melalui beberapa contoh, Anda akan merasa lebih sederhana.
1. Contoh tentang buku dan rak buku
Book = backbone.model.extend ({defaults: {// Terima kasih kepada netizens untuk mengubah koreksi daya biru menjadi defaultStitle: 'default'}, inisialisasi: function () {// alert ('hey, you create me!');}}); Bookshelf = backbone.collection.extend ({{{{{{bookshelf = bookshelf = bookshelf = backbone.collection.extend ({{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{); 'book1'}); var book2 = buku baru ({title: 'book2'}); var book3 = buku baru ({judul: 'book3'}); // var bookshelf = new Bookshelf ([Book1, book2, book3]); //Note that it is an array, or use addvar bookShelf = new BookShelf;bookShelf.add(book1);bookShelf.add(book2);bookShelf.add(book3);bookShelf.remove(book3);//Based on the underscore js library, you can also use each method to obtain the data in the collection bookshelf.each (function (book) {alert (book.get ('title'));});Sangat sederhana, tidak ada penjelasan
2. Gunakan fetch untuk mendapatkan data dari sisi server
Pertama, Anda perlu mendefinisikan URL di rak buku di atas. Perhatikan bahwa properti urlroot tidak ada dalam koleksi. Atau Anda secara langsung mendefinisikan nilai URL dalam metode fetch, sebagai berikut:
bookshelf.fetch ({url: '/getBooks/', Success: function (collection, response) {collection.each (function (book) {waspada (book.get ('title'));});}, error: function () {alert ('error');}});Ada juga dua metode yang menerima nilai pengembalian. Saya pikir mudah untuk memahami makna spesifiknya. Jika Anda mengembalikan data dalam format yang benar, Anda akan menghubungi metode keberhasilan, dan metode kesalahan akan dipanggil. Tentu saja, metode kesalahan juga tergantung pada penambahan parameter formal yang sama dengan metode keberhasilan.
Rak buku yang sesuai dengan format pengembalian adalah sebagai berikut: [{'judul': 'book1'}, {'judul': 'book2'} .....]
3. Metode Reset
Ketika metode ini digunakan, harus dikoordinasikan dengan pengambilan di atas. Setelah pengumpulan mengambil data, metode reset akan dipanggil, jadi Anda perlu menentukan metode reset atau mengikat metode reset dalam koleksi. Berikut adalah demonstrasi menggunakan binding:
bookshelf.bind ('reset', showallbooks); showallbooks = function () {bookshelf.each (function (book) {// render data buku ke halaman.});}Langkah -langkah pengikatan harus dilakukan sebelum mengambil.
Kode lengkap tentang koleksi diberikan di bawah ini, yang membutuhkan dukungan sisi server. Konstruksi sisi server akan ditulis nanti.
<!DOCTYPE html><html><head> <title>the5fire-backbone-collection</title></head><body></body><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <skrip src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <skrip src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <skrip src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </script> <script> (function ($) {// Koleksi adalah kumpulan model sederhana // 1. Contoh buku sederhana = backbone.model. Judul Koreksi ke Default: 'Default'}, inisialisasi: function () {// alert ('Hei, Anda membuat saya!') Book3 '}); i <Bookshelf.models.length; To Render Bookshelf.Bind ('Reset', ShowAllbooks); Bookshelf.each (Function (Book) {// Render data buku ke halaman.});