يعمل جهاز التوجيه في العمود الفقري كدالة توجيه ، والتحكم في اتجاه عنوان URL ، ويصبح ساري المفعول عند استخدام العلامة # في عنوان URL.
يتطلب تحديد جهاز التوجيه على الأقل جهاز توجيه واحد ودالة لرسم خريطة عنوان URL محدد ، ونحن بحاجة إلى تذكر أنه في العمود الفقري ، سيتم استلام أي حرف بعد # العلامة وتفسيره بواسطة جهاز التوجيه.
دعونا نحدد جهاز التوجيه:
<script> var amprouter = backbone.router.extend ({Routes: {"*Actions": "defaultroute" // match http://example.com/#aning-here}}}) ؛ // instantiate router var app_router = new approuter ؛ app_router.on ('Route: defaultroute' ، function (Actions) {Alert (Actions) ؛}).الآن ، لقد حددنا جهاز توجيه ، ولكن في هذا الوقت لا يتطابق جهاز التوجيه مع عنوان URL المحدد. بعد ذلك ، سنبدأ في شرح كيفية عمل جهاز التوجيه بالتفصيل.
التوجيه الديناميكي
يتيح لك العمود الفقري تحديد جهاز توجيه مع معلمات محددة. على سبيل المثال ، قد ترغب في تلقي منشور عبر معرف معين ، مثل عنوان URL: "http://example.com/#/posts/12". بمجرد تنشيط جهاز التوجيه هذا ، يمكنك الحصول على منشور مع معرف 12. بعد ذلك ، دعنا نحدد هذا الموجه:
<script> var amprouter = backbone.router.extend ({Routes: {"posts/: id": "getPost" ، "*Actions": "defaultroute" // backbone سوف يتطابق مع الطرق وفقًا للطلب}}) ؛ // instantiate router var app_router = new approuter ؛ app_router.on ('Route: GetPost' ، function (id) {// لاحظ أن المعلمات يتم تمريرها هنا في حالة تأهب ("الحصول على رقم post" + id) ؛}) ؛ app_router.on ('route: defaultroute' ، function (Actions) {Alert (Actions) ؛}) ؛ // افتح تاريخ تاريخ العمود الفقري.قواعد مطابقة
يستخدم العمود الفقري شكلين من المتغيرات لتعيين قواعد المطابقة لجهاز التوجيه. الأول هو: ، والتي يمكن أن تتوافق مع أي معلمات بين القطع المائلة في عنوان URL ، والآخر هو *، والذي يستخدم لمطابقة جميع الأجزاء وراء القطع. لاحظ أنه نظرًا لأن النموذج الثاني له غموض أكبر من الأول ، فإنه يتمتع بأقل أولوية مطابقة.
يتم تمرير نتيجة أي شكل من أشكال المطابقة في الوظيفة ذات الصلة كمعلمة. قد تقوم القاعدة الأولى بإرجاع معلمة واحدة أو أكثر ، وتُرجع القاعدة الثانية نتيجة المطابقة بأكملها كمعلمة.
بعد ذلك ، دعونا نستخدم أمثلة لتوضيح:
المسارات: {"posts/: id": "getPost" ، // <a href = "http://example.com/#/posts/121"> مثال </a> "LoadView" ، // <a href = "http://example.com/#/dashboard/graph"> عرض المسار/الإجراء </a>} ، app_router.on ('Route: getPost' ، function (id) {alert (id) ؛ // بعد المطابقة ، المعلمة التي تم تمريرها هي 12}) ؛ التنبيه (المسار) ؛قد تسمع غالبًا كلمة "جهاز التوجيه" ، ولكنها غالبًا ما تشير إلى جهاز شبكة يمثل التنقل والمركز لاتصالات الشبكة ونقل البيانات. وظيفة "جهاز التوجيه" في العمود الفقري تشبهها. كما ترون من المثال أعلاه ، يمكنه التنقل في مرساة URL المختلفة إلى طريقة الإجراء المقابلة.
(تم توفير هذه الآلية أيضًا في العديد من أطر الويب من جانب الخادم ، لكن العمود الفقري.
يتم التنقل في توجيه العمود الفقري بواسطة فئتين من العمود الفقري.
عمومًا لا نستند إلى تاريخ مباشرة ، لأنه عندما نقوم بإنشاء مثيل لجهاز التوجيه لأول مرة ، سنقوم تلقائيًا بإنشاء كائن من التاريخ المفرد ، والذي يمكنك الوصول إليه من خلال Backbone.history.
لاستخدام وظيفة التوجيه ، نحتاج أولاً إلى تحديد فئة جهاز التوجيه لإعلان قواعد url والإجراءات التي يجب الاستماع إليها. في المثال الآن ، نحدد قائمة عنوان URL المراد الاستماع إليها من خلال سمة الطرق عند تحديدها ، حيث يمثل المفتاح قواعد عنوان URL ويمثل القيمة طريقة الإجراء التي يتم تنفيذها عندما يكون عنوان URL في هذه القاعدة.
قواعد التجزئة
تمثل قواعد عنوان URL جزء التجزئة (نقطة مرساة) في عنوان URL الحالي. بالإضافة إلى القدرة على تحديد السلاسل العامة في القواعد ، نحتاج أيضًا إلى الانتباه إلى قاعدتين ديناميكيتين خاصتين:
سيتم تحويل سلسلة مفصولة بـ / (SLASH) في القاعدة إلى تعبير ([^//]+) داخل فئة جهاز التوجيه ، تمثل أحرفًا متعددة تبدأ بـ / (SLASH). إذا تم تعيين: (القولون) في هذه القاعدة ، فهذا يعني أنه سيتم نقل هذه السلسلة في عنوان URL إلى العمل كمعلمة.
على سبيل المثال ، قمنا بتعيين موضوع القاعدة/: معرف. عندما تكون نقطة المرساة هو #الموضوع/1023 ، سيتم تمرير 1023 إلى اتخاذ إجراء كمعرف معلمة. سيكون اسم المعلمة (: ID) في القاعدة عمومًا هو نفس اسم المعلمة الرسمية لطريقة الإجراء. على الرغم من أن جهاز التوجيه ليس له مثل هذه القيود ، إلا أنه من الأسهل فهم استخدام نفس اسم المعلمة.
* (العلامة النجمية) في القاعدة يتم تحويلها إلى تعبير (.*؟) داخل جهاز التوجيه ، الذي يمثل صفوفًا أو أكثر تعسفية. بالمقارنة مع قاعدة: (القولون) ، * (العلامة النجمية) لا يوجد لديه / (SLASH) الحد من الفصل ، تمامًا مثل قاعدة الخطأ التي حددناها في المثال أعلاه.
تستخدم قاعدة * (النجمة) في جهاز التوجيه نمطًا غير غريدي بعد تحويله إلى تعبير منتظم ، بحيث يمكنك استخدام قاعدة تركيبة مثل هذا: * type/: id ، والتي يمكن أن تتطابق مع #Hot/1023 ، وسوف تمر ساخنًا و 1023 كمعلمات لطريقة الإجراء.
يقدم أعلاه كيفية تعريف القواعد. ستتوافق هذه القواعد مع اسم طريقة الإجراء ، والذي يجب أن يكون في كائن جهاز التوجيه.
بعد تحديد فئة جهاز التوجيه ، نحتاج إلى إنشاء مثيل لكائن جهاز التوجيه والاتصال بالطريقة START () لكائن Backbone.history ، والذي سيبدأ الاستماع إلى عنوان URL. داخل كائن التاريخ ، سيتم استخدام حدث OnhashChange للاستماع للتغييرات في عنوان URL إلى التجزئة (نقطة مرساة). بالنسبة للمتصفحات التي لا تدعم حدث onhashchange (مثل IE6) ، سيستمع التاريخ إلى نبضات القلب setinterval.
قواعد PushState
Backbone.history يدعم أيضا عناوين URL PushState. PushState هي ميزة جديدة توفرها HTML5. يمكنه تشغيل عنوان URL للمتصفح الحالي (بدلاً من مجرد تغيير نقطة المرساة) ، ولن يتسبب في تحديث الصفحة ، مما يجعل تطبيق صفحة واحدة أشبه بعملية كاملة.
لاستخدام ميزة PushState ، تحتاج أولاً إلى فهم بعض الأساليب والأحداث التي توفرها HTML5 لهذه الميزة (يتم تعريف هذه الطرق في الكائن.
1.PushState (): يمكن لهذه الطريقة إضافة كيان تاريخ جديد إلى تاريخ المتصفح إلى عنوان URL المحدد.
2. REPLACESTATE (): يمكن أن تحل هذه الطريقة محل كيان التاريخ الحالي بعنوان URL المحدد
إن استدعاء أساليب PushState () و replacestate () هو مجرد استبدال عنوان URL الخاص بالصفحة الحالية ، ولن يذهب حقًا إلى عنوان عنوان URL هذا (عند استخدام الزر الخلفي أو التوجيه ، لن يقفز إلى عنوان URL). يمكننا الاستماع إلى تغييرات عنوان URL الناجم عن هاتين الطريقتين من خلال حدث OnpopState.
توجيه الأساليب ذات الصلة
1. Route () طريقة
بعد تعيين قواعد التوجيه ، إذا كان التعديل الديناميكي مطلوبًا ، فيمكنك الاتصال بطريقة Router.Route () لإضافة قواعد التوجيه وطرق الإجراء ديناميكيًا ، على سبيل المثال:
Router.Route ('topic/: pageno/: pagesize' ، 'page' ، function (pageno ، pagesize) {// toDo}) ؛ عندما نسمي طريقة المسار () ، يمكن أن تكون القاعدة المحددة مجرد سلسلة ، ولكن أيضًا تعبيرًا منتظمًا: Router.Route (/^topic/(*؟)/(.*؟) $/، 'page' ، function (pageno ، pagesize) {// todo}) ؛2. Navitive () طريقة
في المثال السابق ، يتم تشغيل قواعد عنوان URL بواسطة مدخلاتنا اليدوية. في التطبيقات الفعلية ، قد يكون من الضروري في بعض الأحيان القفز والملاحة يدويًا ، ويمكنك تسميته
يتم استخدام طريقة Router.Navitation () للتحكم ، على سبيل المثال: Router.navity ('Topic/1000' ، {trigger: true}) ؛يغير هذا الرمز عنوان URL إلى http: //localhost/index.html#topic/1000 ويؤدي إلى تشغيل طريقة RenderDetail. تجدر الإشارة إلى أننا نمر في تكوين الزناد في المعلمة الثانية ، والذي يتم استخدامه للإشارة إلى ما إذا كانت طريقة الإجراء المقابلة يتم تشغيلها أثناء تغيير عنوان URL.
3. Stop () طريقة
تذكر أننا بدأنا في توجيه الاستماع من خلال طريقة backbone.history.start (). يمكنك أيضًا استدعاء طريقة backbone.history.stop () في أي وقت للتوقف عن الاستماع ، على سبيل المثال:
Router.Route ('topic/: pageno/: pagesize' ، 'page' ، function (pageno ، pagesize) {backbone.history.stop () ؛}) ؛قم بتشغيل هذا الرمز والوصول إلى عنوان URL: http: //localhost/index.html#topic/5/20. ستجد أنه بعد تنفيذ هذا الإجراء ، لن يكون الاستماع ساري المفعول.