แบบอย่าง
เกี่ยวกับกระดูกสันหลังสิ่งพื้นฐานที่สุดคือแบบจำลอง สิ่งนี้เป็นเหมือนรูปแบบการแมปฐานข้อมูลในการพัฒนาส่วนหลัง นอกจากนี้ยังเป็นรูปแบบของวัตถุข้อมูลและควรมีคุณลักษณะเช่นเดียวกับโมเดลในแบ็คเอนด์ (เฉพาะแอตทริบิวต์ที่ต้องดำเนินการผ่านส่วนหน้า)
มาดูกันว่าโมเดลกระดูกสันหลังมาจากตัวอย่างทีละขั้นตอน
ก่อนกำหนดหน้า HTML:
<! doctype html> <html> <head> <title> the5fire-backbone-model </title> </head> <body> </body> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4.4/jquery.min.4/jquery.min.4/ src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <สคริปต์ src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <สคริปต์ src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <สคริปต์ src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </script> <script> (ฟังก์ชั่น ($) {/***ใส่รหัสที่นี่ **/})รหัสต่อไปนี้จะต้องกรอกในฟังก์ชั่นในแท็กสคริปต์ของ HTML นี้
1. วัตถุที่ง่ายที่สุด
man = backbone.model.extend ({เริ่มต้น: function () {การแจ้งเตือน ('เฮ้คุณสร้างฉัน!');}}); var man = คนใหม่;มันง่ายมาก นอกจากนี้ยังมีการนำเสนอแบบจำลองใน HelloWorld โดยไม่ต้องกำหนดคุณลักษณะ นี่คือวิธีการในระหว่างการเริ่มต้นหรือตัวสร้าง
2. สองวิธีของการกำหนดวัตถุ
อันแรกคือการกำหนดโดยตรงและตั้งค่าเริ่มต้น
man = backbone.model.extend ({เริ่มต้น: function () {Alert ('เฮ้คุณสร้างฉัน!');}, ค่าเริ่มต้น: {ชื่อ: 'จางซาน', อายุ: '38'}}); var man = คนใหม่;ประเภทที่สองถูกกำหนดเมื่อกำหนด
man = backbone.model.extend ({เริ่มต้น: function () {การแจ้งเตือน ('เฮ้คุณสร้างฉัน!');}}); man.set ({ชื่อ: 'the5fire', อายุ: '10 '}); แจ้งเตือน (man.get (' ชื่อ ');เมื่อใช้ค่ารับค่า GET จะถูกใช้
3. วิธีการในวัตถุ
man = backbone.model.extend ({เริ่มต้น: function () {Alert ('เฮ้คุณสร้างฉัน!');}, ค่าเริ่มต้น: {ชื่อ: 'จางซาน', อายุ: '38'}, เกี่ยวกับฟังก์ชั่น () {return ' มนุษย์; แจ้งเตือน (man.aboutme ());4. ฟังการเปลี่ยนแปลงในแอตทริบิวต์ในวัตถุ
man = backbone.model.extend ({เริ่มต้น: function () {alert ('เฮ้คุณสร้างฉัน!'); // ผูกการฟังระหว่างการเริ่มต้นสิ่งนี้ bind ("เปลี่ยน: ชื่อ", ฟังก์ชัน () {name name = this.get ("ชื่อ"); }, เกี่ยวกับ me: function () {return 'my name คือ' + this.get ('ชื่อ') + ', ปีนี้' + this.get ('อายุ') + 'ปี'; var man = คนใหม่; man.set ({ชื่อ: 'the5fire'}) // ทริกเกอร์เหตุการณ์การเปลี่ยนแปลงที่ถูกผูกไว้การแจ้งเตือน5. เพิ่มกฎการตรวจสอบลงในวัตถุและข้อผิดพลาดพรอมต์
man = backbone.model.extend ({เริ่มต้น: function () {Alert ('เฮ้คุณสร้างฉัน!'); // ผูกการฟังในระหว่างการเริ่มต้นสิ่งนี้ bind ("เปลี่ยน: ชื่อ", ฟังก์ชัน () {name name = this.get ("ชื่อ"); }; }}); var man = คนใหม่; man.set ({ชื่อ: ''}); // ตามกฎการตรวจสอบข้อความแสดงข้อผิดพลาดจะปรากฏขึ้น6. การได้มาและการจัดเก็บของวัตถุจำเป็นต้องมีการสนับสนุนด้านเซิร์ฟเวอร์เพื่อทดสอบ
ก่อนอื่นคุณต้องกำหนดแอตทริบิวต์ URL สำหรับวัตถุ เมื่อเรียกวิธีการบันทึกแอตทริบิวต์ทั้งหมดของวัตถุจะถูกโพสต์ไปยังเซิร์ฟเวอร์
man = backbone.model.extend ({url: '/save/', เริ่มต้น: function () {alert ('เฮ้คุณสร้างฉัน!'); // ผูกการฟังระหว่างการเริ่มต้น this.bind ("เปลี่ยน: ชื่อ", ฟังก์ชั่น () {var name = this.get ("ชื่อ"); this.bind ("ข้อผิดพลาด", ฟังก์ชั่น (โมเดล, ข้อผิดพลาด) {แจ้งเตือน (ข้อผิดพลาด);});}, ค่าเริ่มต้น: {ชื่อ: 'จางซาน', อายุ: '38'}, ตรวจสอบ: ฟังก์ชัน (แอตทริบิวต์)}}}}}}}} ', ปีนี้' + this.get ('อายุ') + 'ปีเก่า';}}); var man = คนใหม่ ;; man.set ({ชื่อ: 'the5fire'}); man.save (); // โพสต์จะถูกส่งไปยัง URL ที่สอดคล้องกับโมเดลและรูปแบบข้อมูลคือ JSON {"ชื่อ": "The5fire", "อายุ": 38} // จากนั้นรับข้อมูลจากฝั่งเซิร์ฟเวอร์โดยใช้วิธีการดึงข้อมูล ([ตัวเลือก]) var man1 = ใหม่; // ในกรณีแรก หรือโพสต์ทางฝั่งเซิร์ฟเวอร์ man1.fetch (); // ในกรณีที่สองเพิ่มพารามิเตอร์ลงในการดึงดังนี้: man1.fetch ({url: '/getmans/'}); // ด้วยวิธีนี้คำขอรับจะถูกส่งไปยัง URL/getmans/ // รูปแบบผลลัพธ์ที่ส่งคืนโดยเซิร์ฟเวอร์ควรเป็นข้อมูลรูปแบบ JSON ที่สอดคล้องกันเหมือนกับรูปแบบของการโพสต์เมื่อบันทึก // อย่างไรก็ตามวิธีการยอมรับข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์มีดังนี้: man1.fetch ({url: '/getmans/', ความสำเร็จ: ฟังก์ชั่น (โมเดล, การตอบสนอง) {การแจ้งเตือน ('ความสำเร็จ'); // โมเดลคือการแจ้งเตือนข้อมูลที่เรียกคืน -หมายเหตุ: รหัสด้านบนเป็นเฉพาะรหัสที่สามารถเรียกใช้งานได้ตามปกติ แต่จะมีอินสแตนซ์เกี่ยวกับฝั่งเซิร์ฟเวอร์ในภายหลัง
ควรเพิ่มที่นี่ว่าการทำงานแบบอะซิงโครนัสของเซิร์ฟเวอร์เสร็จสมบูรณ์ผ่านวิธี backbone.sync เมื่อเรียกใช้วิธีนี้พารามิเตอร์จะถูกส่งผ่านโดยอัตโนมัติและคำขอที่เกี่ยวข้องจะถูกส่งไปยังเซิร์ฟเวอร์ตามพารามิเตอร์ ตัวอย่างเช่นหากคุณบันทึกและกระดูกสันหลังจะพิจารณาว่าวัตถุของคุณใหม่หรือไม่ หากสร้างขึ้นใหม่พารามิเตอร์จะถูกสร้างขึ้น หากเป็นวัตถุที่มีอยู่จะมีการเปลี่ยนแปลงเฉพาะพารามิเตอร์คือการอัปเดต หากคุณเรียกวิธีการดึงข้อมูลพารามิเตอร์จะถูกอ่าน ถ้ามันเป็น destory พารามิเตอร์จะถูกลบ นั่นคือสิ่งที่เรียกว่า crud ("สร้าง", "อ่าน", "อัปเดต" หรือ "ลบ") และประเภทคำขอที่สอดคล้องกับพารามิเตอร์ทั้งสี่นี้คือโพสต์, รับ, ใส่และลบ คุณสามารถทำการดำเนินการ CRUD ที่สอดคล้องกันบนเซิร์ฟเวอร์ตามประเภทคำขอนี้
บันทึก:
เกี่ยวกับ URL และ urlroot หากคุณตั้งค่า URL CRUD ของคุณจะส่งคำขอที่เกี่ยวข้องไปยัง URL นี้ อย่างไรก็ตามปัญหาอื่นคือคำขอลบถูกส่ง แต่ไม่มีการส่งข้อมูล จากนั้นคุณไม่ทราบว่าควรลบวัตถุใด (บันทึก) ทางฝั่งเซิร์ฟเวอร์ ดังนั้นนี่เป็นอีกแนวคิดหนึ่งของ urlroot หลังจากที่คุณตั้งค่า urlroot เมื่อคุณส่งคำขอใส่และลบที่อยู่ URL ของคำขอคือ: /baseurl/ [model.id] ดังนั้นคุณสามารถอัปเดตหรือลบวัตถุที่เกี่ยวข้อง (บันทึก) โดยการแยกค่าหลังจาก URL ทางฝั่งเซิร์ฟเวอร์
ของสะสม
คอลเลกชันเป็นคอลเลกชันที่สั่งซื้อของวัตถุโมเดล มันง่ายมากที่จะเข้าใจแนวคิด หากคุณดูผ่านตัวอย่างบางส่วนคุณจะพบว่ามันง่ายขึ้น
1. ตัวอย่างเกี่ยวกับหนังสือและชั้นวางหนังสือ
book = backbone.model.extend ({ค่าเริ่มต้น: {// ขอบคุณชาวเน็ตสำหรับการเปลี่ยนการแก้ไขพลังงานสีน้ำเงินเป็น defaultStitle: 'default'}, เริ่มต้น: function () {// Alert ('เฮ้คุณสร้างฉัน!');}}); bookshelf = backbone.collection.extend 'book1'}); var book2 = หนังสือเล่มใหม่ ({title: 'book2'}); var book3 = หนังสือเล่มใหม่ ({title: 'book3'}); // var bookshelf = bookshelf ใหม่ ([book1, book2, book3]); // โปรดทราบว่ามันเป็นอาร์เรย์หรือใช้ AddVar Bookshelf = Bookshelf ใหม่; bookshelf.add (book1); bookshelf.add (book2); bookshelf.add (book3); bookshelf.remove (book3); // ตามห้องสมุด JS bookshelf.each (ฟังก์ชั่น (หนังสือ) {alert (book.get ('title'));});ง่ายมากไม่มีคำอธิบาย
2. ใช้การดึงข้อมูลเพื่อรับข้อมูลจากฝั่งเซิร์ฟเวอร์
ก่อนอื่นคุณต้องกำหนด URL ในชั้นวางหนังสือด้านบน โปรดทราบว่าคุณสมบัติ urlroot ไม่มีอยู่ในคอลเลกชัน หรือคุณกำหนดค่าของ URL โดยตรงในวิธีการดึงข้อมูลดังนี้:
bookshelf.fetch ({url: '/getbooks/', ความสำเร็จ: ฟังก์ชั่น (คอลเลกชัน, การตอบกลับ) {collection.each (ฟังก์ชั่น (หนังสือ) {alert (book.get ('title'));});}, ข้อผิดพลาด: ฟังก์ชัน () {แจ้งเตือน ('ข้อผิดพลาด');}});นอกจากนี้ยังมีสองวิธีที่ยอมรับค่าส่งคืน ฉันคิดว่ามันง่ายที่จะเข้าใจความหมายเฉพาะ หากคุณส่งคืนข้อมูลในรูปแบบที่ถูกต้องคุณจะเรียกวิธีการประสบความสำเร็จและวิธีการข้อผิดพลาดจะถูกเรียก แน่นอนว่าวิธีการผิดพลาดยังขึ้นอยู่กับการเพิ่มพารามิเตอร์ที่เป็นทางการเช่นเดียวกับวิธีการประสบความสำเร็จ
รูปแบบ Bookshelf Returns ที่เกี่ยวข้องมีดังนี้: [{'title': 'book1'}, {'title': 'book2'} ..... ]
3. วิธีการรีเซ็ต
เมื่อใช้วิธีนี้จะต้องมีการประสานงานกับการดึงข้อมูลข้างต้น หลังจากการรวบรวมข้อมูลดึงข้อมูลวิธีการรีเซ็ตจะถูกเรียกดังนั้นคุณต้องกำหนดวิธีการรีเซ็ตหรือผูกวิธีการรีเซ็ตในการรวบรวม นี่คือการสาธิตการใช้การผูก:
bookshelf.bind ('รีเซ็ต', showallbooks); showallbooks = function () {bookshelf.each (ฟังก์ชั่น (หนังสือ) {// แสดงข้อมูลหนังสือไปยังหน้า});}ขั้นตอนการผูกจะต้องดำเนินการก่อนการดึงข้อมูล
รหัสที่สมบูรณ์เกี่ยวกับการรวบรวมได้รับด้านล่างซึ่งต้องการการสนับสนุนฝั่งเซิร์ฟเวอร์ การก่อสร้างฝั่งเซิร์ฟเวอร์จะถูกเขียนในภายหลัง
<! doctype html> <html> <head> <title> the5fire-backbone-collection </title> </head> <body> </body> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4.4/jquery.min.4/jquery.min.4/ src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <สคริปต์ src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <สคริปต์ src = "http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"> </script> <สคริปต์ src = "http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"> </script> <script> (ฟังก์ชั่น ($) {// คอลเลกชันเป็นคอลเลกชันที่สั่งซื้อของแบบจำลองที่เรียบง่าย // 1 การแก้ไขชื่อเรื่อง: 'ค่าเริ่มต้น'}, เริ่มต้น: {) {// การแจ้งเตือน ('เฮ้คุณสร้างฉัน!');}}); 'book3'}); I <bookshelf.models.length; และใช้รีเซ็ตเป็น bookshelf.bind ('รีเซ็ต', showallbooks); bookshelf.each (ฟังก์ชั่น (หนังสือ) {// แสดงข้อมูลหนังสือไปยังหน้า});} // รหัสด้านบนเป็นเฉพาะรหัสที่สามารถดำเนินการได้ตามปกติ