เราเตอร์ในกระดูกสันหลังทำหน้าที่เป็นฟังก์ชั่นการกำหนดเส้นทางควบคุมทิศทางของ URL และมีผลเมื่อใช้ # แท็กใน URL
การกำหนดเราเตอร์ต้องใช้เราเตอร์อย่างน้อยหนึ่งเราและฟังก์ชั่นในการแมป URL เฉพาะและเราต้องจำไว้ว่าในกระดูกสันหลังตัวละครใด ๆ หลังจากที่แท็ก # จะได้รับและตีความโดยเราเตอร์
มากำหนดเราเตอร์กันเถอะ:
<script> var approuter = backbone.router.extend ({เส้นทาง: {"*การกระทำ": "defaultroute" // จับคู่ http://example.com/#anything-here}}); // อินสแตนซ์เราเตอร์ var app_router = approuter ใหม่; app_router.on ('เส้นทาง: defaultroute', ฟังก์ชั่น (การกระทำ) {แจ้งเตือน (การกระทำ);}) // เปิดประวัติแบ็คโบนของแบ็คโบน history.start (); </script>ตอนนี้เราได้กำหนดเราเตอร์ แต่ในเวลานี้เราเตอร์ไม่ตรงกับ URL เฉพาะ ต่อไปเราจะเริ่มอธิบายรายละเอียดว่าเราเตอร์ทำงานอย่างไร
การกำหนดเส้นทางแบบไดนามิก
Backbone ช่วยให้คุณกำหนดเราเตอร์ที่มีพารามิเตอร์เฉพาะ ตัวอย่างเช่นคุณอาจต้องการรับโพสต์ผ่านรหัสเฉพาะเช่น URL: "http://example.com/#/posts/12" เมื่อเปิดใช้งานเราเตอร์นี้คุณจะได้รับโพสต์ด้วยรหัส 12 ถัดไปให้กำหนดเราเตอร์นี้กันเถอะ:
<script> var approuter = backbone.router.extend ({เส้นทาง: {"โพสต์/: id": "getPost", "*การกระทำ": "defaultroute" // backbone จะจับคู่เส้นทางตามลำดับ}}); // อินสแตนซ์เราเตอร์ var app_router = approuter ใหม่; app_router.on ('เส้นทาง: getPost', ฟังก์ชั่น (id) {// โปรดทราบว่าพารามิเตอร์จะผ่านการแจ้งเตือนที่นี่ ("รับหมายเลขโพสต์" + id);}); app_router.on ('เส้นทาง: defaultroute', ฟังก์ชั่น (การกระทำ) {แจ้งเตือน (การกระทำ);}); // เปิด Backbone Backbone.history.start (); </script>กฎการจับคู่
Backbone ใช้ตัวแปรสองรูปแบบเพื่อตั้งค่ากฎการจับคู่สำหรับเราเตอร์ อย่างแรกคือ:, ซึ่งสามารถจับคู่พารามิเตอร์ใด ๆ ระหว่าง slashes ใน URL และอีกอันคือ *ซึ่งใช้เพื่อจับคู่ทุกส่วนที่อยู่ด้านหลังสแลช โปรดทราบว่าเนื่องจากรูปแบบที่สองมีความคลุมเครือมากกว่าครั้งแรกจึงมีลำดับความสำคัญที่ต่ำที่สุด
ผลลัพธ์ของรูปแบบการจับคู่ใด ๆ จะถูกส่งผ่านไปยังฟังก์ชันที่เกี่ยวข้องเป็นพารามิเตอร์ กฎข้อแรกอาจส่งคืนพารามิเตอร์หนึ่งตัวขึ้นไปและกฎที่สองจะส่งคืนผลลัพธ์การจับคู่ทั้งหมดเป็นพารามิเตอร์
ต่อไปเรามาใช้ตัวอย่างเพื่อแสดง:
เส้นทาง: {"โพสต์/: id": "getPost", // <a href = "http://example.com/#/posts/121"> ตัวอย่าง </a> "ดาวน์โหลด/*path": "ดาวน์โหลด file", // <a href = "http://example.com ": เส้นทาง/: การกระทำ": "loadView", // <a href = "http://example.com/#/dashboard/graph"> โหลดเส้นทาง/มุมมองการกระทำ </a>}, app_router.on ('เส้นทาง: getPost', ฟังก์ชัน (id) {Alert (id); ฟังก์ชั่น (พา ธ ) {แจ้งเตือน (พา ธ );คุณมักจะได้ยินคำว่า "เราเตอร์" แต่มักจะหมายถึงอุปกรณ์เครือข่ายที่เป็นการนำทางและฮับสำหรับการเชื่อมต่อเครือข่ายการส่งข้อมูล ฟังก์ชั่น "เราเตอร์" ในกระดูกสันหลังคล้ายกับมัน อย่างที่คุณเห็นจากตัวอย่างข้างต้นสามารถนำทางจุดยึด URL ที่แตกต่างกันไปยังวิธีการกระทำที่สอดคล้องกัน
(กลไกนี้มีให้ในเฟรมเวิร์กเว็บฝั่งเซิร์ฟเวอร์จำนวนมาก แต่ backbone.router มุ่งเน้นไปที่การนำทางของแอปพลิเคชันหน้าเดียวส่วนหน้ามากขึ้น)
การนำทางเส้นทางของ Backbone ทำโดยสองคลาส backbone.router และ backbone.history:
โดยทั่วไปเราไม่ได้สร้างอินสแตนซ์ประวัติโดยตรงเพราะเมื่อเราสร้างอินสแตนซ์ของเราเตอร์เป็นครั้งแรกเราจะสร้างวัตถุซิงเกิลของประวัติศาสตร์โดยอัตโนมัติซึ่งคุณสามารถเข้าถึงผ่าน backbone.history
ในการใช้ฟังก์ชั่นการกำหนดเส้นทางก่อนอื่นเราต้องกำหนดคลาสเราเตอร์เพื่อประกาศกฎ URL และการกระทำที่ต้องรับฟัง ในตัวอย่างตอนนี้เรากำหนดรายการ URL ที่จะฟังผ่านแอตทริบิวต์เส้นทางเมื่อกำหนดโดยที่คีย์แสดงถึงกฎและค่า URL แสดงถึงวิธีการดำเนินการที่ดำเนินการเมื่อ URL อยู่ในกฎนี้
กฎแฮช
กฎ URL แสดงส่วนแฮช (จุดยึด) ใน URL ปัจจุบัน นอกเหนือจากความสามารถในการระบุสตริงทั่วไปในกฎแล้วเรายังต้องให้ความสนใจกับกฎไดนามิกพิเศษสองประการ:
สตริงที่คั่นด้วย / (slash) ในกฎจะถูกแปลงเป็นนิพจน์ ([^//]+) ภายในคลาสเราเตอร์ซึ่งแสดงถึงตัวละครหลายตัวที่เริ่มต้นด้วย / (Slash) ถ้า: (ลำไส้ใหญ่) ถูกตั้งค่าในกฎนี้หมายความว่าสตริงนี้ใน URL จะถูกส่งผ่านไปยังการดำเนินการเป็นพารามิเตอร์
ตัวอย่างเช่นเราตั้งค่าหัวข้อกฎ/: id เมื่อจุดยึดคือ #หัวข้อ/1023, 1023 จะถูกส่งผ่านไปยังการดำเนินการเป็น ID พารามิเตอร์ ชื่อพารามิเตอร์ (: ID) ในกฎโดยทั่วไปจะเหมือนกับชื่อพารามิเตอร์ที่เป็นทางการของวิธีการกระทำ แม้ว่าเราเตอร์จะไม่มีข้อ จำกัด ดังกล่าว แต่ก็ง่ายที่จะเข้าใจโดยใช้ชื่อพารามิเตอร์เดียวกัน
* (เครื่องหมายดอกจัน) ในกฎจะถูกแปลงเป็นนิพจน์ (.*?) ภายในเราเตอร์ซึ่งเป็นตัวแทนของอักขระที่เป็นศูนย์หรือมากกว่า เมื่อเทียบกับกฎ: (ลำไส้ใหญ่) * (เครื่องหมายดอกจัน) ไม่มีข้อ จำกัด การแยก / สแลช) เช่นเดียวกับกฎข้อผิดพลาด * ที่เรากำหนดไว้ในตัวอย่างด้านบน
กฎ * (Asterisk) ในเราเตอร์ใช้รูปแบบที่ไม่ใช่ Greedy หลังจากถูกแปลงเป็นนิพจน์ทั่วไปดังนั้นคุณสามารถใช้กฎการรวมกันเช่นนี้: * type/: id ซึ่งสามารถจับคู่ #hot/1023 และจะผ่านร้อนและ 1023 เป็นพารามิเตอร์ไปยังวิธีการดำเนินการ
ข้างต้นแนะนำวิธีการกำหนดกฎ กฎเหล่านี้จะสอดคล้องกับชื่อวิธีการกระทำซึ่งจะต้องอยู่ในวัตถุเราเตอร์
หลังจากกำหนดคลาสเราเตอร์แล้วเราต้องยกตัวอย่างวัตถุเราเตอร์และเรียกใช้วิธีการเริ่มต้น () ของ backbone วัตถุประวัติศาสตร์ซึ่งจะเริ่มฟัง URL ภายในวัตถุประวัติศาสตร์เหตุการณ์ OnHashChange จะถูกใช้เพื่อฟังการเปลี่ยนแปลงใน URL เป็นแฮช (จุดยึด) สำหรับเบราว์เซอร์ที่ไม่สนับสนุนเหตุการณ์ OnhashChange (เช่น IE6) ประวัติศาสตร์จะฟังการเต้นของหัวใจ setInterval
กฎ pushstate
backbone.history ยังรองรับ URL ของ pushstate Pushstate เป็นคุณสมบัติใหม่ที่จัดทำโดย HTML5 มันสามารถใช้งาน URL ของเบราว์เซอร์ปัจจุบัน (แทนที่จะเปลี่ยนจุดยึด) และจะไม่ทำให้เกิดการรีเฟรชหน้าทำให้แอปพลิเคชันหน้าเดียวมากขึ้นเหมือนกระบวนการที่สมบูรณ์
ในการใช้คุณสมบัติ pushstate คุณต้องเข้าใจวิธีการและเหตุการณ์บางอย่างที่จัดทำโดย HTML5 สำหรับคุณลักษณะนี้ (วิธีการเหล่านี้ถูกกำหนดไว้ในหน้าต่างวัตถุประวัติศาสตร์):
1.PushState (): วิธีนี้สามารถเพิ่มเอนทิตีประวัติใหม่ให้กับประวัติเบราว์เซอร์ไปยัง URL ที่ระบุ
2. Replacestate (): วิธีนี้สามารถแทนที่เอนทิตีประวัติปัจจุบันด้วย URL ที่ระบุ
การโทร pushstate () และวิธีการแทนที่ () เป็นเพียงการแทนที่ URL ของหน้าปัจจุบันและมันจะไม่ไปที่ที่อยู่ URL นี้จริงๆ (เมื่อใช้ปุ่มย้อนกลับหรือไปข้างหน้ามันจะไม่ข้ามไปยัง URL) เราสามารถฟังการเปลี่ยนแปลง URL ที่เกิดจากวิธีการทั้งสองนี้ผ่านเหตุการณ์ OnPopState
วิธีการที่เกี่ยวข้องกับการกำหนดเส้นทาง
1. วิธีการ ()
หลังจากตั้งค่ากฎการกำหนดเส้นทางหากจำเป็นต้องมีการปรับแบบไดนามิกคุณสามารถเรียกเมธอดเราเตอร์ Route () เพื่อเพิ่มกฎการกำหนดเส้นทางและวิธีการดำเนินการแบบไดนามิกตัวอย่างเช่น:
Router.Route ('หัวข้อ/: pageno/: pagesize', 'หน้า', ฟังก์ชั่น (pageno, pageSize) {// toDo}); เมื่อเราเรียกเมธอดเส้นทาง () กฎที่กำหนดไม่เพียง แต่เป็นสตริง แต่ยังเป็นนิพจน์ทั่วไป: เราเตอร์.route (/^หัวข้อ /(.*?)/(.*?)$/, 'หน้า', ฟังก์ชั่น (pageno, pageize) {// toDo});2.Navigate () วิธีการ
ในตัวอย่างก่อนหน้ากฎ URL จะถูกเรียกใช้โดยอินพุตด้วยตนเองของเรา ในแอปพลิเคชันจริงบางครั้งอาจจำเป็นต้องกระโดดและการนำทางด้วยตนเองและคุณสามารถเรียกได้ว่า
เมธอดเราเตอร์. navigate () ใช้สำหรับการควบคุมตัวอย่างเช่น: เราเตอร์. navigate ('หัวข้อ/1000', {ทริกเกอร์: จริง});รหัสนี้เปลี่ยน URL เป็น http: //localhost/index.html#topic/1000 และทริกเกอร์วิธีการ renderdetail ควรสังเกตว่าเราผ่านการกำหนดค่าทริกเกอร์ในพารามิเตอร์ที่สองซึ่งใช้เพื่อระบุว่าวิธีการกระทำที่สอดคล้องกันจะถูกทริกเกอร์ในขณะที่เปลี่ยน URL หรือไม่
3.STOP () วิธีการ
จำไว้ว่าเราเริ่มกำหนดเส้นทางการฟังผ่าน backbone.history.start () นอกจากนี้คุณยังสามารถโทรหา backbone.history.stop () ได้ตลอดเวลาเพื่อหยุดการฟังตัวอย่างเช่น:
Router.Route ('หัวข้อ/: pageno/: pageSize', 'หน้า', ฟังก์ชั่น (pageno, pagesize) {backbone.history.stop ();});เรียกใช้รหัสนี้และเข้าถึง URL: http: //localhost/index.html#topic/5/20 คุณจะพบว่าหลังจากการกระทำนี้ดำเนินการแล้วการฟังจะไม่มีผลอีกต่อไป