โมเดลคืออะไร
ผู้เขียน Backbone กำหนดรูปแบบดังนี้:
โมเดลเป็นแกนหลักของเว็บแอปพลิเคชันใด ๆ มันมีข้อมูลแบบโต้ตอบและตรรกะส่วนใหญ่ ตัวอย่างเช่น: การแปลงการตรวจสอบคุณลักษณะและสิทธิ์การเข้าถึง ฯลฯ
ก่อนอื่นมาสร้างโมเดล:
person = backbone.model.extend ({เริ่มต้น: function () {alert ("ยินดีต้อนรับสู่ Backbone!");}}); var person = บุคคลใหม่;ในรหัสข้างต้นเรากำหนดโมเดลที่มีชื่อว่าบุคคลและหลังจากอินสแตนซ์เราได้รับบุคคล เมื่อใดก็ตามที่คุณทำตัวอย่างแบบจำลองวิธีการเริ่มต้น () จะถูกทริกเกอร์โดยอัตโนมัติ (หลักการนี้ยังใช้กับการรวบรวมมุมมอง) แน่นอนว่าวิธีการเริ่มต้น () ไม่ได้บังคับเมื่อกำหนดโมเดล แต่เมื่อคุณใช้กระดูกสันหลังคุณจะพบว่ามันขาดไม่ได้
ตั้งค่าคุณสมบัติโมเดล
ตอนนี้เราต้องการผ่านพารามิเตอร์บางอย่างเมื่อสร้างอินสแตนซ์แบบจำลองเพื่อตั้งค่าคุณสมบัติของโมเดล:
person = backbone.model.extend ({เริ่มต้น: function () {alert ("ยินดีต้อนรับสู่ Backbone!");}}); // ตั้งค่า var person = บุคคลใหม่ ({ชื่อ: "Stephenlee" อายุ: 22}); // var person = คนใหม่ (); person.set ({ชื่อ: "Stephenlee", อายุ: 22});รับคุณสมบัติแบบจำลอง
การใช้วิธีการ Get () ของแบบจำลองเราสามารถรับคุณสมบัติ:
person = backbone.model.extend ({เริ่มต้น: function () {alert ("ยินดีต้อนรับสู่ backbone!");}}); var person = บุคคลใหม่ ({ชื่อ: "Stephenlee", อายุ: 22}); // 22var name = person.get ("ชื่อ"); // "Stephenlee"ตั้งค่าคุณสมบัติเริ่มต้นของรุ่น
บางครั้งคุณต้องการให้โมเดลรวมค่าคุณสมบัติเริ่มต้นบางอย่างเมื่อสร้างอินสแตนซ์ซึ่งสามารถทำได้โดยการกำหนดคุณสมบัติเริ่มต้นของโมเดล:
person = backbone.model.extend ({ค่าเริ่มต้น: {ชื่อ: "lebronjames", อายุ: 30,}, เริ่มต้น: ฟังก์ชั่น () {แจ้งเตือน ("ยินดีต้อนรับสู่ Backbone!");}}); var person = บุคคลใหม่ ({ชื่อ: "Stephenlee"}); // เนื่องจากไม่ได้ระบุค่าอายุในระหว่างการสร้างอินสแตนซ์ค่าเริ่มต้นคือชื่อ 30 วาร์ = person.get ("ชื่อ"); // หากอินสแตนซ์ได้ตั้งค่าชื่อมันคือ "สตีเฟ่นลี"ใช้คุณสมบัติของแบบจำลอง
คุณสามารถปรับแต่งวิธีการในโมเดลเพื่อใช้คุณสมบัติภายในโมเดล (วิธีการที่กำหนดเองทั้งหมดเริ่มต้นสู่สาธารณะ)
person = backbone.model.extend ({ค่าเริ่มต้น: {ชื่อ: "lebronjames", อายุ: 30, งานอดิเรก: "บาสเก็ตบอล"}, เริ่มต้น: ฟังก์ชั่น () {Alert ("" ยินดีต้อนรับสู่ Backbone! ");}, เช่น: ฟังก์ชั่น (HobbyName) "Stephenlee", อายุ: 22}); person.like ("การเข้ารหัส"); // ตั้งค่างานอดิเรกของ Stephenlee เป็น CodingVar Hobby = person.get ("Hobby"); // "การเข้ารหัส"ฟังการเปลี่ยนแปลงคุณสมบัติของโมเดล
ตามกลไกของกระดูกสันหลังเราสามารถฟังคุณลักษณะใด ๆ ของโมเดล ต่อไปเราพยายามผูกแอตทริบิวต์ของโมเดลในวิธีการเริ่มต้น () เพื่อฟังโดยใช้ชื่อแอตทริบิวต์เป็นตัวอย่าง:
person = backbone.model.extend ({ค่าเริ่มต้น: {ชื่อ: "lebronjames", อายุ: 30,}, เริ่มต้น: function () {Alert ("ยินดีต้อนรับสู่ Backbone!"); this.on ("เปลี่ยนชื่อ", ฟังก์ชั่น (รุ่น) - var person = คนใหม่ (); var ate = person.set ({ชื่อ: "kobebryant"});ผ่านรหัสข้างต้นเรารู้วิธีฟังคุณสมบัติบางอย่างของโมเดล สมมติว่าเราจำเป็นต้องฟังคุณสมบัติทั้งหมดของโมเดลใช้ 'this.on ("เปลี่ยน" ฟังก์ชั่น (โมเดล) {}); -
การโต้ตอบข้อมูลระหว่างเซิร์ฟเวอร์และรุ่น
ดังที่ได้กล่าวไว้ก่อนหน้านี้โมเดลมีข้อมูลแบบโต้ตอบดังนั้นหนึ่งในฟังก์ชั่นของมันคือการส่งข้อมูลที่ส่งจากเซิร์ฟเวอร์และโต้ตอบกับเซิร์ฟเวอร์ ตอนนี้สมมติว่ามีผู้ใช้ตารางของ MySQL บนเซิร์ฟเวอร์ซึ่งมีสามฟิลด์ ID ชื่อและอีเมล ฝั่งเซิร์ฟเวอร์ใช้สไตล์ REST เพื่อสื่อสารกับส่วนหน้าและใช้ URL: /ผู้ใช้เพื่อโต้ตอบ แบบจำลองของเราถูกกำหนดเป็น:
var usermodel = backbone.model.extend ({urlroot: '/user', ค่าเริ่มต้น: {ชื่อ: '', อีเมล: ''}});สร้างโมเดล
แต่ละรุ่นใน Backbone มี ID คุณสมบัติซึ่งสอดคล้องกับข้อมูลฝั่งเซิร์ฟเวอร์ทีละตัว หากเราต้องการเพิ่มเร็กคอร์ดใหม่ให้กับผู้ใช้ตาราง MySQL ฝั่งเซิร์ฟเวอร์เราเพียงแค่ต้องทำอินสแตนซ์โมเดลและเรียกวิธีการบันทึก () ในเวลานี้รหัสแอตทริบิวต์ของอินสแตนซ์ของโมเดลนั้นว่างเปล่าซึ่งหมายความว่าโมเดลถูกสร้างขึ้นใหม่ดังนั้น Backbone จะส่งคำขอโพสต์ไปยัง URL ที่ระบุ
var usermodel = backbone.model.extend ({urlroot: '/user', ค่าเริ่มต้น: {ชื่อ: '', อีเมล: ''}}); var user = usermodel ใหม่ (); // บันทึกว่า โมเดลไม่มีแอตทริบิวต์ ID ใช้วิธีการบันทึก () ในเวลานี้ Backbone จะส่งคำขอโพสต์ไปยังฝั่งเซิร์ฟเวอร์ หลังจากได้รับข้อมูลแล้วเซิร์ฟเวอร์จะเก็บข้อมูลไว้และส่งคืนข้อมูลที่มี ID ไปยัง ModelUser.save (UserDetails, {ความสำเร็จ: ฟังก์ชั่น (ผู้ใช้) {Alert (user.tojson ());}})ในเวลานี้มีบันทึกเพิ่มเติมในตารางผู้ใช้ของ MySQL บนเซิร์ฟเวอร์ที่มีชื่อ Stephenlee และอีเมล [email protected]
รับรุ่น
เราเพิ่งสร้างโมเดลและเก็บไว้ในฐานข้อมูลฝั่งเซิร์ฟเวอร์ สมมติว่าเมื่อสร้างโมเดลค่าแอตทริบิวต์ ID ที่ส่งคืนโดยฝั่งเซิร์ฟเวอร์คือ 1 ในเวลานี้เราสามารถดึงข้อมูลที่เก็บไว้ผ่านค่าของ ID เมื่อเราเริ่มต้นอินสแตนซ์แบบจำลองด้วยค่าแอตทริบิวต์ ID ผ่านการดำเนินการ FETCH () Backbone จะส่งคำขอ GET ไปยัง URL ที่ระบุ
var user = ใหม่ usermodel ({id: 1}); // ระบุค่าของ ID ในระหว่างการเริ่มต้น // ใช้เมธอด FETCH () เพื่อขอข้อมูลจากผู้ใช้/1 และฝั่งเซิร์ฟเวอร์จะส่งคืนบันทึกผู้ใช้ที่สมบูรณ์รวมถึงชื่ออีเมลและข้อมูลอื่น ๆอัปเดตรุ่น
หากเราต้องการแก้ไขระเบียนผู้ใช้ที่เก็บไว้ให้ใช้ค่า ID ที่รู้จักและใช้วิธีการบันทึก () แต่เนื่องจาก ID ไม่ว่างเปล่าในเวลานี้แบ็คโบนจะส่งคำขอใส่ไปยัง URL ที่ระบุ
var user = ใหม่ usermodel ({id: 1, ชื่อ: 'Stephenlee', อีเมล: '[email protected]'}); // ระบุค่า ID เมื่ออินสแตนซ์ // เนื่องจากมีการระบุค่า ID ใช้วิธีบันทึก () ในเวลานี้ Backbone จะส่งคำขอใส่ไปยังผู้ใช้/1 และจะแก้ไขอีเมลของบันทึกด้วย ID 1 ในฐานข้อมูล user.save ({อีเมล: '[email protected]'}, {ความสำเร็จ: ฟังก์ชั่น (รุ่น) {แจ้งเตือน (user.tojson ());}});ลบโมเดล
หากเราต้องการลบระเบียนในฐานข้อมูลให้ใช้ค่า ID ที่รู้จักและใช้วิธีการทำลาย () ณ จุดนี้กระดูกสันหลังจะส่งการดำเนินการลบไปยัง URL ที่ระบุ
var user = ใหม่ usermodel ({id: 1, ชื่อ: 'Stephenlee', อีเมล: '[email protected]'}); // ระบุค่า ID เมื่ออินสแตนซ์ // เนื่องจากค่า ID ถูกระบุใช้วิธีการทำลาย () ในเวลานี้ หลังจากได้รับคำขอข้อมูลที่มี ID 1 จะถูกลบในผู้ใช้ฐานข้อมูล. destroy ({ความสำเร็จ: function () {การแจ้งเตือน ('ทำลาย');}});คอลเลกชันคืออะไร
กล่าวโดยย่อคอลเลกชันใน Backbone เป็นคอลเลกชันของรุ่นที่สั่งซื้อเช่นอาจใช้ในสถานการณ์ต่อไปนี้:
รุ่น: นักเรียน, คอลเลกชัน: ClassStudentsModel: รายการสิ่งที่ต้องทำ, คอลเลกชัน: Todo ListModel: Animal, Collection: Zoo
โดยทั่วไปคอลเลกชันจะใช้แบบจำลองประเภทเดียวกันเท่านั้น แต่โมเดลสามารถเป็นของคอลเลกชันประเภทต่าง ๆ เช่น:
รุ่น: นักเรียน, คอลเลกชัน: Gym Model: นักเรียน, คอลเลกชัน: Art Classmodel: นักเรียน, คอลเลกชัน: ชั้นเรียนภาษาอังกฤษ
สร้างคอลเลกชัน
// define model songvar song = backbone.model.extend ({ค่าเริ่มต้น: {ชื่อ: "ไม่ได้ระบุ", ศิลปิน: "ไม่ระบุ"}, เริ่มต้น: ฟังก์ชั่น () {console.log ("เพลงคือคำตอบ");}}); Song1 = เพลงใหม่ ({ชื่อ: "How Bizarre", ศิลปิน: "OMC"}); var song1 = เพลงใหม่ ({ชื่อ: "bizarre", ศิลปิน: "omc"}); var song2 = เพลงใหม่ ({ชื่อ: myalbum = อัลบั้มใหม่ ([song1, song2, song3]); console.log (myalbum.models); // เอาท์พุทคือ [song1, song2, song3]