Koleksi backbone.js hanyalah model set yang dipesan sederhana. Dengan beradaptasi dengan model dan koleksi, kami dapat menghindari logika pemrosesan data yang ditempatkan di lapisan tampilan kami. Selain itu, model dan koleksi menyediakan cara yang nyaman untuk bekerja dengan backend, dan ketika data berubah, tampilan backbone.js dapat ditandai secara otomatis. Dengan cara ini, dapat digunakan dalam kasus -kasus berikut:
Salinan kode adalah sebagai berikut:
Model: Hewan, Koleksi: Kebun Binatang
Biasanya set Anda hanya cocok untuk satu model, tetapi model itu sendiri tidak terbatas pada jenis set.
Salinan kode adalah sebagai berikut:
Model: Orang, Koleksi: Kantor
Model: Orang, Koleksi: Beranda
Berikut adalah contoh model/set umum:
Salinan kode adalah sebagai berikut:
var music = backbone.model.extend ({
inisialisasi: function () {
Console.log ("Selamat Datang di Dunia Musik");
}
});
var album = backbone.collection.extend ({
Model: Musik
});
Kode di atas memberi tahu kami cara membuat koleksi. Tapi itu tidak memberi tahu kami proses memanipulasi set dengan data. Jadi, mari kita jelajahi proses ini:
Salinan kode adalah sebagai berikut:
var music = backbone.model.extend ({
default: {
Nama: "tidak ditentukan",
Artis: "Tidak Ditentukan"
},
inisialisasi: function () {
Console.log ("Selamat Datang di Dunia Musik"); }
});
var album = backbone.collection.extend ({
Model: Musik
});
var music1 = musik baru ({id: 1, nama: "how bizarre", artis: "omc"});
var musik 2 = musik baru ({id: 2, nama: "What Hurts the Most the", artist: "Rascal Flatts"});
var myalbum = album baru ([musik 1, musik 2]);
console.log (myalbum.models);
Mari kita lihat hubungan antara koleksi backbone.js dan komponen lainnya:
1. Tambahkan model ke koleksi
Seperti yang kita ketahui, satu set adalah kumpulan model. Oleh karena itu, kami dapat menambahkan model pada koleksi. Untuk menambahkan model ke koleksi, kami dapat menggunakan metode Add. Kami juga dapat menambahkan model ke awal koleksi - dengan menggunakan metode Unshift.
Salinan kode adalah sebagai berikut:
var music3 = musik baru ({id: 3, nama: "ya saya lakukan", artis: "rascal flatts"});
Music.add (musik3);
Console.log ('Lagu Baru Ditambahkan');
console.log (json.stringify (musik));
2. Lepaskan model dari set
Sering kali, kami memiliki kebutuhan untuk menghapus beberapa data yang ditentukan dari koleksi. Untuk menghapus model dari koleksi, kita perlu memberikan ID model. Jika kami ingin mengganti koleksi asli dengan dataset baru yang lengkap, kami dapat menggunakan metode reset.
Salinan kode adalah sebagai berikut:
Music.remove (1);
console.log ('Bagaimana aneh dihapus ...');
console.log (json.stringify (musik));
3. Dapatkan dan Setel
Jika kita perlu mendapatkan nilai dari koleksi di tempat lain dalam kode, kita dapat menggunakan metode GET secara langsung. Pada titik ini, kami meneruskan nilai ID ke model dengan pencarian.
Salinan kode adalah sebagai berikut:
console.log (json.stringify (music.get (2)));
Ada implementasi yang menarik dari metode set dari set. Metode Set melakukan pembaruan "cerdas" dari koleksi dengan melewati daftar model. Jika model dalam daftar tidak ada dalam koleksi, itu ditambahkan ke koleksi. Jika model sudah ada dalam koleksi, propertinya digabungkan. Jika koleksi berisi model apa pun yang bukan milik daftar, model dihapus.
Salinan kode adalah sebagai berikut:
var music = backbone.model.extend ({
// Atribut ini harus ditetapkan sebagai default
default: {
Nama: ''
},
// Atur atribut ID sehingga koleksi
Idattribute: 'ID'
});
var song = backbone.collection.extend ({
Model: Musik
});
var model = [{
Nama: 'OMC',
ID: 1
}, {
Nama: 'Flatts',
ID: 2
}];
var collection = lagu baru (model);
collection.bind ('add', function (model) {
Peringatan ('AddB')
});
collection.bind ('rampa', function () {
waspada ('tambahkan')
});
model = [{
Nama: 'OMC',
ID: 1
}, {
Nama: 'Flatts',
ID: 2
}, {
Nama: 'Jackson',
ID: 3
}];
collection.add (model);
});
Seperti yang kita lihat di atas, kami sudah memiliki 2 model sebelumnya, dan ketika kami menambahkan model ke -3, model sebelumnya tetap sama.
Iv. Konstruktor dan inisialisasi
Saat kami membuat koleksi, kami dapat melewati array yang diinisialisasi dari model. Komparator set dapat ditambahkan sebagai opsi. Jika opsi pembanding yang dilewatkan salah, penyortiran dicegah. Jika kita mendefinisikan fungsi inisialisasi, fungsi ini akan dipanggil ketika koleksi dibuat. Berikut ini adalah beberapa opsi, jika disediakan, akan ditambahkan langsung ke set: model dan pembanding.
Salinan kode adalah sebagai berikut:
var tabs = tabset baru ([tab1, tab2, tab3]);
var spaces = backbone.collection baru ([], {
Model: Ruang
});
5. TOJSON
Metode TOJSO mengembalikan array dalam koleksi yang berisi atribut setiap model hash. Metode ini biasanya digunakan untuk membuat serialisasi dan bertahan seluruh set.
Salinan kode adalah sebagai berikut:
var song = new Backbone.collection ([
{name: "flatts"},
{name: "OMC"},
{name: "jackson"}
]);
alert (json.stringify (lagu));
6. Pembanding
Secara default, koleksi tidak memiliki pembanding. Jika kita mendefinisikan pembanding, itu dapat digunakan untuk menjaga set dalam beberapa jenis. Ini berarti bahwa ketika menambahkan model, model dimasukkan ke lokasi yang sesuai dalam koleksi. Pembanding dapat didefinisikan dalam SortBy, atau menunjukkan properti yang diurutkan dalam string.
Fungsi pembanding sortby mendapatkan model dan mengembalikan angka atau string.
Fungsi pembanding sortir memperoleh dua model. Jika model pertama di depan model kedua, maka kembali -1; Jika kedua model tersebut memiliki level yang sama, maka mengembalikan 0; Jika model kedua di depan model pertama, maka kembalikan 1.
Mari kita lihat contoh di bawah ini:
Salinan kode adalah sebagai berikut:
var student = backbone.model;
var siswa = Backbone.collection baru;
Siswa.ComParker = 'Name';
student.add (siswa baru ({name: "name1", roll: 9}));
Student.add (siswa baru ({name: "name2", roll: 5}));
student.add (siswa baru ({name: "name3", roll: 1}));
waspada (student.pruck ('roll'));
Set yang akan dibandingkan tidak secara otomatis diatur ulang, bahkan jika kami memodifikasi sifat model. Oleh karena itu, kita harus memanggil penyortiran ketika estimasi akan mempengaruhi jenis setelah memodifikasi atribut model.
7. Sortir
Saat menambahkan model ke koleksi, koleksi harus dipaksa untuk dipesan ulang. Untuk menonaktifkan penyortiran saat menambahkan model koleksi, Anda dapat melewati parameter {sort: false}. Memanggil pemicu yang diurutkan memeriksa parameter ini.
Salinan kode adalah sebagai berikut:
sortByType: function (type) {
this.sortkey = type;
this.sort ();
}
Dan melihat fungsi:
Salinan kode adalah sebagai berikut:
SortthingsByColumn: function (event) {
var type = event.currentTarget.classlist [0]
this.collections.things.sortbyType (type)
this.render ()
}
8. Memilih
Pluck: Pilih satu atribut dari masing -masing model dalam koleksi, yang setara dengan memanggil peta dari iterator dan mengembalikan satu atribut.
Salinan kode adalah sebagai berikut:
var song = new Backbone.collection ([
{name: "flatts"},
{name: "OMC"},
{name: "jackson"}
]);
var name = songs.pluck ("name");
alert (json.stringify (nama));
9. Dimana
Di mana: Mengembalikan serangkaian model dalam koleksi yang cocok dengan properti yang dilewati, menggunakan filter.
Salinan kode adalah sebagai berikut:
var song = new Backbone.collection ([
{name: "ya saya lakukan", artis: "flatts"},
{name: "How Bizarre", Artist: "How Bizarre"},
{name: "What Hurts The Most Betis", Artist: "Flatts"},
]);
var artist = song.where ({artis: "flatts"});
waspada (artis.length);
10. URL
Mengatur properti URL dalam koleksi akan merujuk ke lokasi server. Model dalam koleksi akan menggunakan URL ini untuk membangun URL mereka sendiri.
Salinan kode adalah sebagai berikut:
var songs = backbone.collection.extend ({
URL: '/lagu'
});
var songs = backbone.collection.extend ({
url: function () {
kembalikan this.document.url () + '/lagu';
}
});
11. Analisis
Parse: Dipanggil oleh backbone saat mengambil, terlepas dari apakah server mengembalikan model koleksi. Fungsi ini melewati objek respons asli, yang seharusnya mengembalikan array properti model yang ditambahkan ke koleksi. Implementasi default adalah operasi no-op. Sederhana melewati respons JSON, menimpa ini dengan API yang sudah ada sebelumnya, atau respons namespace yang lebih baik.
Salinan kode adalah sebagai berikut:
var songs = backbone.collection.extend ({
Parse: function (response) {
Return Response.Results;
}
});
12. Ekstraksi
Fetch: Ekstrak set model default koleksi dari server, dan atur dalam koleksi setelah pengambilan. Opsi ini hash menerima callback kesuksesan atau kesalahan, yang melewati tiga parameter (set, respons, opsi). Kemudian kembalikan data model dari server. Ini digunakan untuk mengatur model yang diekstraksi gabungan.
Salinan kode adalah sebagai berikut:
Backbone.sync = fungsi (metode, model) {
peringatan (metode + ":" + model.url);
};
var songs = new Backbone.collection;
songs.url = '/lagu';
songs.fetch ();
Seperti yang dapat Anda lihat di atas, ada banyak cara untuk menguasai mereka untuk meningkatkan kualitas kode Anda.