คอลเลกชันของ backbone.js เป็นเพียงรุ่นที่สั่งง่าย ด้วยการปรับให้เข้ากับแบบจำลองและคอลเลกชันเราสามารถหลีกเลี่ยงตรรกะการประมวลผลข้อมูลที่ถูกวางไว้ในเลเยอร์มุมมองของเรา นอกจากนี้โมเดลและคอลเลกชันยังให้วิธีที่สะดวกในการทำงานกับแบ็กเอนด์และเมื่อการเปลี่ยนแปลงข้อมูลการมองเห็น backbone.js สามารถทำเครื่องหมายได้โดยอัตโนมัติ ด้วยวิธีนี้สามารถใช้ในกรณีต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
แบบจำลอง: สัตว์คอลเลกชัน: สวนสัตว์
โดยปกติแล้วชุดของคุณจะเหมาะสำหรับรุ่นเดียวเท่านั้น แต่โมเดลนั้นไม่ได้ จำกัด อยู่ที่ประเภทของชุด
การคัดลอกรหัสมีดังนี้:
รุ่น: บุคคลคอลเลกชัน: สำนักงาน
โมเดล: บุคคลคอลเลกชัน: บ้าน
นี่คือตัวอย่างของโมเดล/ชุดทั่วไป:
การคัดลอกรหัสมีดังนี้:
var music = backbone.model.extend ({
เริ่มต้น: function () {
console.log ("ยินดีต้อนรับสู่โลกดนตรี");
-
-
var album = backbone.collection.extend ({
นางแบบ: ดนตรี
-
รหัสด้านบนบอกเราถึงวิธีการสร้างคอลเลกชัน แต่มันไม่ได้บอกเราถึงกระบวนการจัดการชุดด้วยข้อมูล ดังนั้นเรามาสำรวจกระบวนการนี้กันเถอะ:
การคัดลอกรหัสมีดังนี้:
var music = backbone.model.extend ({
ค่าเริ่มต้น: {
ชื่อ: "ไม่ได้ระบุ"
ศิลปิน: "ไม่ได้ระบุ"
-
เริ่มต้น: function () {
console.log ("ยินดีต้อนรับสู่โลกดนตรี"); -
-
var album = backbone.collection.extend ({
นางแบบ: ดนตรี
-
var music1 = เพลงใหม่ ({id: 1, ชื่อ: "How Bizarre", ศิลปิน: "OMC"});
var music 2 = เพลงใหม่ ({id: 2, ชื่อ: "อะไรที่เจ็บปวดที่สุด", ศิลปิน: "Rascal Flatts"});
var myalbum = อัลบั้มใหม่ ([เพลง 1, เพลง 2]);
console.log (myalbum.models);
ลองมาดูความสัมพันธ์ระหว่างคอลเลกชัน backbone.js และส่วนประกอบอื่น ๆ :
1. เพิ่มโมเดลลงในคอลเลกชัน
อย่างที่เราทราบชุดคือคอลเลกชันของโมเดล ดังนั้นเราสามารถเพิ่มโมเดลในคอลเลกชัน ในการเพิ่มโมเดลลงในคอลเลกชันเราสามารถใช้วิธีการเพิ่ม นอกจากนี้เรายังสามารถเพิ่มโมเดลในการเริ่มต้นของคอลเลกชัน - โดยใช้วิธี Unshift
การคัดลอกรหัสมีดังนี้:
var music3 = เพลงใหม่ ({id: 3, ชื่อ: "ใช่ฉันทำ", ศิลปิน: "Rascal Flatts"});
Music.Add (Music3);
console.log ('เพลงใหม่เพิ่ม');
console.log (json.stringify (เพลง));
2. ถอดโมเดลออกจากชุด
หลายครั้งเรามีความจำเป็นที่จะต้องลบข้อมูลที่ระบุบางส่วนออกจากคอลเลกชัน ในการลบโมเดลออกจากคอลเลกชันเราจำเป็นต้องจัดเตรียม ID ของโมเดล หากเราต้องการแทนที่คอลเลกชันดั้งเดิมด้วยชุดข้อมูลใหม่ที่สมบูรณ์เราสามารถใช้วิธีการรีเซ็ต
การคัดลอกรหัสมีดังนี้:
Music.remove (1);
console.log ('วิธีการลบที่แปลกประหลาดอย่างไร ... ');
console.log (json.stringify (เพลง));
3. รับและตั้งค่า
หากเราต้องการรับค่าจากคอลเลกชันที่อื่นในรหัสเราสามารถใช้วิธี GET ได้โดยตรง ณ จุดนี้เราส่งค่า ID ไปยังโมเดลด้วยการค้นหา
การคัดลอกรหัสมีดังนี้:
console.log (json.stringify (music.get (2)));
มีการใช้วิธีการที่น่าสนใจของชุดของชุด วิธีการตั้งค่าการอัปเดต "อัจฉริยะ" ของคอลเลกชันโดยผ่านรายการโมเดล หากโมเดลในรายการไม่ได้อยู่ในคอลเลกชันมันจะถูกเพิ่มเข้าไปในคอลเลกชัน หากโมเดลอยู่ในคอลเลกชันแล้วคุณสมบัติของมันจะถูกรวมเข้าด้วยกัน หากคอลเลกชันมีโมเดลใด ๆ ที่ไม่ได้อยู่ในรายการโมเดลจะถูกลบออก
การคัดลอกรหัสมีดังนี้:
var music = backbone.model.extend ({
// แอตทริบิวต์นี้ควรตั้งค่าเป็นค่าเริ่มต้น
ค่าเริ่มต้น: {
ชื่อ: ''
-
// ตั้งค่าแอตทริบิวต์ ID เพื่อให้คอลเลกชัน
Idattribute: 'id'
-
var song = backbone.collection.extend ({
นางแบบ: ดนตรี
-
รุ่น var = [{
ชื่อ: 'OMC',
id: 1
-
ชื่อ: 'Flatts',
id: 2
-
var collection = เพลงใหม่ (รุ่น);
collection.bind ('เพิ่ม', ฟังก์ชั่น (โมเดล) {
การแจ้งเตือน ('addb')
-
collection.bind ('ลบ', function () {
การแจ้งเตือน ('เพิ่ม')
-
models = [{
ชื่อ: 'OMC',
id: 1
-
ชื่อ: 'Flatts',
id: 2
-
ชื่อ: 'Jackson',
id: 3
-
collection.add (รุ่น);
-
อย่างที่เราเห็นด้านบนเรามี 2 รุ่นก่อนหน้านี้และเมื่อเราเพิ่มโมเดลที่ 3 รุ่นก่อนหน้านี้ยังคงเหมือนเดิม
iv. ตัวสร้างและการเริ่มต้น
เมื่อเราสร้างคอลเลกชันเราสามารถผ่านอาร์เรย์ที่เริ่มต้นของโมเดล ตัวเปรียบเทียบของชุดสามารถเพิ่มเป็นตัวเลือก หากตัวเลือกตัวเปรียบเทียบที่ผ่านเป็นเท็จการเรียงลำดับจะถูกป้องกัน หากเรากำหนดฟังก์ชั่นการเริ่มต้นฟังก์ชั่นนี้จะถูกเรียกเมื่อสร้างคอลเลกชัน ต่อไปนี้เป็นตัวเลือกหลายอย่างหากมีให้จะถูกเพิ่มลงในชุด: โมเดลและตัวเปรียบเทียบ
การคัดลอกรหัสมีดังนี้:
แท็บ var = tabset ใหม่ ([tab1, tab2, tab3]);
var spaces = new backbone.collection ([], {
รุ่น: พื้นที่
-
5. Tojson
วิธี TOJSO ส่งคืนอาร์เรย์ในคอลเลกชันที่มีแอตทริบิวต์แฮชแต่ละรุ่น วิธีนี้มักจะใช้เพื่อทำให้เป็นอนุกรมและคงไว้ซึ่งทั้งชุด
การคัดลอกรหัสมีดังนี้:
var song = new backbone.collection ([
{ชื่อ: "Flatts"},
{ชื่อ: "OMC"}
{ชื่อ: "Jackson"}
-
การแจ้งเตือน (json.stringify (เพลง));
6. เปรียบเทียบ
โดยค่าเริ่มต้นคอลเลกชันไม่มีตัวเปรียบเทียบ หากเรากำหนดตัวเปรียบเทียบมันสามารถใช้เพื่อเก็บชุดไว้ในบางประเภท ซึ่งหมายความว่าเมื่อเพิ่มโมเดลโมเดลจะถูกแทรกลงในตำแหน่งที่เหมาะสมในคอลเลกชัน ตัวเปรียบเทียบสามารถกำหนดใน sortby หรือระบุคุณสมบัติที่เรียงลำดับในสตริง
ฟังก์ชั่น Sortby Comparator ได้รับโมเดลและส่งคืนตัวเลขหรือสตริง
ฟังก์ชั่นตัวเปรียบเทียบการเรียงลำดับได้รับสองรุ่น หากรุ่นแรกอยู่ข้างหน้ารุ่นที่สองให้กลับมา -1; หากทั้งสองรุ่นอยู่ในระดับเดียวกันให้ส่งกลับ 0; หากรุ่นที่สองอยู่ข้างหน้ารุ่นแรกให้ส่งกลับ 1
มาดูตัวอย่างด้านล่าง:
การคัดลอกรหัสมีดังนี้:
var student = backbone.model;
VAR นักเรียน = ใหม่ backbone.collection;
นักเรียน comparator = 'ชื่อ';
นักเรียน ADD (นักเรียนใหม่ ({ชื่อ: "name1", ม้วน: 9}));
นักเรียน ADD (นักเรียนใหม่ ({ชื่อ: "name2", ม้วน: 5}));
นักเรียน ADD (นักเรียนใหม่ ({ชื่อ: "name3", ม้วน: 1}));
การแจ้งเตือน (นักเรียนพลา ('ม้วน'));
ชุดที่จะเปรียบเทียบจะไม่ได้จัดเรียงใหม่โดยอัตโนมัติแม้ว่าเราจะแก้ไขคุณสมบัติของโมเดล ดังนั้นเราควรเรียกการเรียงลำดับเมื่อการประมาณค่าจะส่งผลกระทบต่อการเรียงลำดับหลังจากแก้ไขแอตทริบิวต์ของโมเดล
7. จัดเรียง
เมื่อเพิ่มโมเดลลงในคอลเล็กชันคอลเลกชันควรถูกบังคับให้จัดลำดับใหม่ ในการปิดใช้งานการเรียงลำดับเมื่อเพิ่มโมเดลคอลเลกชันคุณสามารถผ่านพารามิเตอร์ {sort: false} การเรียกทริกเกอร์เรียงลำดับตรวจสอบพารามิเตอร์นี้
การคัดลอกรหัสมีดังนี้:
SortByType: ฟังก์ชั่น (ประเภท) {
this.sortkey = type;
this.sort ();
-
และฟังก์ชั่นดู:
การคัดลอกรหัสมีดังนี้:
SortthingsByColumn: ฟังก์ชั่น (เหตุการณ์) {
var type = event.currenttarget.classlist [0]
this.collections.things.sortbytype (ประเภท)
this.render ()
-
8. การเลือก
PLUCK: เลือกหนึ่งแอตทริบิวต์จากแต่ละรุ่นในคอลเลกชันซึ่งเทียบเท่ากับการเรียกแผนที่จากตัววนซ้ำและส่งคืนแอตทริบิวต์เดียว
การคัดลอกรหัสมีดังนี้:
var song = new backbone.collection ([
{ชื่อ: "Flatts"},
{ชื่อ: "OMC"}
{ชื่อ: "Jackson"}
-
ชื่อ var = songs.pluck ("ชื่อ");
การแจ้งเตือน (json.stringify (ชื่อ));
9. ที่ไหน
โดยที่: ส่งคืนอาร์เรย์ของโมเดลในคอลเลกชันที่ตรงกับคุณสมบัติที่ผ่านโดยใช้ตัวกรอง
การคัดลอกรหัสมีดังนี้:
var song = new backbone.collection ([
{ชื่อ: "ใช่ฉันทำ", ศิลปิน: "Flatts"},
{ชื่อ: "วิธีที่แปลกประหลาด", ศิลปิน: "How Bizarre"},
{ชื่อ: "อะไรที่เจ็บปวดที่สุด", ศิลปิน: "Flatts"},
-
Var Artists = song.where ({ศิลปิน: "Flatts"});
การแจ้งเตือน (ศิลปินความยาว);
10. URL
การตั้งค่าคุณสมบัติ URL ในคอลเลกชันจะอ้างถึงตำแหน่งของเซิร์ฟเวอร์ โมเดลภายในคอลเลกชันจะใช้ URL นี้เพื่อสร้าง URL ของตนเอง
การคัดลอกรหัสมีดังนี้:
var songs = backbone.collection.extend ({
URL: '/เพลง'
-
var songs = backbone.collection.extend ({
URL: function () {
ส่งคืน this.document.url () + '/songs';
-
-
11. การวิเคราะห์
Parse: เรียกโดย Backbone เมื่อดึงข้อมูลโดยไม่คำนึงว่าเซิร์ฟเวอร์จะส่งคืนโมเดลของคอลเลกชันหรือไม่ ฟังก์ชั่นนี้ผ่านวัตถุการตอบสนองดั้งเดิมซึ่งควรส่งคืนอาร์เรย์ของคุณสมบัติโมเดลที่เพิ่มเข้าไปในคอลเลกชัน การใช้งานเริ่มต้นคือการดำเนินการแบบไม่มีการดำเนินการ ผ่านการตอบสนอง JSON ง่าย ๆ เขียนทับสิ่งนี้ด้วย API ที่มีอยู่แล้วหรือตอบสนองเนมสเปซที่ดีกว่า
การคัดลอกรหัสมีดังนี้:
var songs = backbone.collection.extend ({
แยกวิเคราะห์: ฟังก์ชั่น (การตอบสนอง) {
Response Response.results;
-
-
12. การสกัด
Fetch: แยกชุดรุ่นเริ่มต้นของคอลเลกชันจากเซิร์ฟเวอร์และตั้งค่าไว้ในคอลเลกชันหลังจากดึงข้อมูล ตัวเลือกแฮชยอมรับความสำเร็จหรือการเรียกกลับข้อผิดพลาดซึ่งผ่านพารามิเตอร์สามตัว (ตั้งค่าการตอบกลับตัวเลือก) จากนั้นส่งคืนข้อมูลรุ่นจากเซิร์ฟเวอร์ มันถูกใช้เพื่อตั้งค่าโมเดลสกัดที่รวมเข้าด้วยกัน
การคัดลอกรหัสมีดังนี้:
backbone.sync = function (method, model) {
การแจ้งเตือน (วิธีการ + ":" + model.url);
-
var songs = new backbone.collection;
songs.url = '/songs';
songs.fetch ();
อย่างที่คุณเห็นด้านบนมีหลายวิธีในการควบคุมพวกเขาเพื่อปรับปรุงคุณภาพของรหัสของคุณ