يتم استخدام العرض في العمود الفقري لتعكس مظهر النموذج في تطبيقك. يستمعون إلى الأحداث ويستجيبون وفقًا لذلك.
في البرنامج التعليمي التالي ، لن أخبرك بكيفية ربط النموذج والمجموعة لعرضه ، ولكن سيناقش بشكل أساسي كيف يستخدم View مكتبات قالب JavaScript ، وخاصة UndersCore.js's _.template.
هنا نستخدم jQuery لمعالجة عناصر DOM. بالطبع ، يمكنك أيضًا استخدام مكتبات أخرى ، مثل Mootools أو Sizzle ، لكن الوثائق الرسمية للعمود الفقري توصي باستخدام jQuery.
بعد ذلك ، نستخدم مربع البحث كمثال لإنشاء طريقة عرض جديدة:
SearchView = backbone.view.extend ({initialize: function () {Alert ("مرحبًا بك في العمود الفقري!") ؛}}) ؛ var search_view = new SearchView () ؛سواء كان نموذجًا أو عرضًا أو مجموعة ، سيتم إطلاق طريقة التهيئة () تلقائيًا عند إنشاء مثيل لها.
سمة el
تشير سمة EL إلى كائن DOM الذي تم إنشاؤه في المتصفح. كل عرض له سمة EL. إذا لم يتم تعريفه ، فسيقوم العمود الفقري بإنشاء عنصر DIV فارغ كسممة EL.
دعنا ننشئ خاصية EL للعرض وضبطها على #Search_Containe.
<div id = "search_container"> </div> <script type = "text/javaScript"> searchView = backbone.view.extend ({initialize: function () {Alert ("مرحبًا بك في العمود الفقري!") ؛}}) ؛ var search_view = new searchView ({el: $ ("#search_container")}) ؛ </script>في هذا الوقت ، تشير سمة EL للعرض إلى عنصر Div الذي يتم Search_Container. نحن ملزمين بهذا العنصر div في هذا الوقت ، لذلك يجب أن يكون أي حدث نريد أن نطلقه في عنصر Div هذا.
قوالب التحميل
يعتمد العمود الفقري بشدة على Sewrerscore.js ، حتى نتمكن من استخدام قوالب صغيرة في Underscore.js.
الآن ، دعنا نضيف طريقة Render () ونسميها في التهيئة () بحيث يتم تشغيل طريقة Render () تلقائيًا عند تهيئة العرض.
ستؤدي طريقة RENDING () إلى تحميل القالب في خاصية EL للعرض من خلال jQuery.
<script type = "text/template" id = "search_template"> <billy> search </billy> <input type = "text" id = "search_input"/> <input backbone.view.extend ({initialize: function () {this.render () ؛} ، render: function () {// عبر ترجمة ترجمة underscore وإنشاء قالب var template = _.template ($ ("#search_template"). ) ؛ var search_view = new searchView ({el: $ ("#search_container")}) ؛ </script>أضف أحداث الاستماع
نستخدم خاصية الأحداث الخاصة بعرض العرض لإضافة أحداث الاستماع ، مع تذكر أنه لا يمكن إضافة أحداث الاستماع إلا إلى عناصر الأطفال في خاصية EL. الآن ، دعنا نضيف حدث الاستماع إلى زر عنصر الطفل.
<script type = "text/template" id = "search_template"> <billy> search </billy> <input type = "text" id = "search_input"/> <input backbone.view.extend ({initialize: function () {this.render () ؛} ، render: function () {var template = _.template ($ ("#search_template"). html () ، {}) ؛ الدالة (الحدث) {// عند النقر فوق الزر ، تنبيه التنبيه ("البحث عن" + $ ("#search_input"). val ()) ؛ var search_view = new searchView ({el: $ ("#search_container")}) ؛ </script>تمرير المعلمات إلى القالب
يمكن للقالب استخدام المعلمات التي تم تمريرها من العرض في شكل <٪ = ٪>.
<script type = "text/template" id = "search_template"> <!-استخدم المعلمات التي تم تمريرها من خلال <٪ = ٪>-> <label> <٪ = search_label ٪> </label> <input type = "text" id = "search_input"/> <button "button" id = "search_button" value = id = "search_container"> </div> <script type = "text/javaScript"> searchView = backbone.view.extend ({initialize: function () {this.render () ؛ template var paramets = _.template ($ ("search_template"). $ ("#search_input"). val ()) ؛ var search_view = new searchView ({el: $ ("#search_container")}) ؛ </script>التعامل مع أحداث DOM
ميزة العرض مهمة للغاية هي مساعدتنا تلقائيًا في ربط أحداث الواجهة. أذكر كيف اعتدنا ربط الأحداث على علامات الواجهة؟ ربما يكون الأمر هكذا:
<p> <input type = "button" value = "create" id = "create" /> <input type = "button" value = "read" id = "read" /> <input readData () {// toDo} وظيفة updatedata () {// toDo} دالة deletedata () {// toDo} دالة deletedata () {// toDo} $ ('#create'). on ('click' ، createata) ؛ $ ('#read'). on ('click' ، readData) ؛ $ ('#update'). on ('click' ، updatedata) ؛ $ ('#delete'). on ('click' ، deletedata) ؛ </script>هذا مثال نموذجي على أحداث DOM ملزمة من خلال jQuery. إذا كنت تقوم بتطوير أو طورت بعض التطبيقات المعقدة ، فربما حاولت تنظيم هذه الرموز بشكل أفضل بطريقة ما بحيث تبدو أكثر تنظيماً وأسهل في الحفاظ عليها.
يوفر لنا كائن عرض العمود الفقري آلية ربط تلقائية للأحداث للحفاظ على العلاقة بين DOM والأحداث بشكل أفضل. لنلقي نظرة على المثال التالي:
<p id = "view"> <input type = "button" value = "create" id = "create" /> <input type = "button" value = "read" id = "read" /> <input backbone.view.extend ({el: '#view' ، الأحداث: {"انقر فوق #create ':' createAta '،' انقر فوق #Read ':' readData '،' click #update ':' updatedata '،' click #delete ':' deletedata '} ، createdata: function () {todo} updatedata: function () {// toDo} ، deletedata: function () {// toDo} ، deletedata: function () {// toDo}}) ؛ var view = new MyView () ؛ </script>في هذا المثال ، وضعنا 4 أزرار في علامة مع عرض المعرف وربط هذه العلامة مع فئة العرض myView.
عند تحديد فئة العرض ، نعلن خاصية الأحداث ، والتي تمثل قائمة أحداث المستخدم في العرض ، ويتم وصفها على النحو التالي:
محدد اسم الحدث: وظيفة معالج الأحداثيمكن أن يكون اسم الحدث أي حدث مدعوم من قبل كائن DOM ، ويمكن أن يكون المحدد أي سلسلة محدد مدعومة بواسطة jQuery أو Zepto (بما في ذلك محدد التسمية ، محدد الفئة ، محدد المعرف ، وما إلى ذلك) ، ويجب أن يكون معالج الأحداث هو اسم الطريقة الذي تم تعريفه في فئة العرض نفسها.
يقوم كائن العرض تلقائيًا بتجميل الوصف في قائمة الأحداث ، أي استخدام jQuery أو Zepto للحصول على كائن DOM الموصوف من قبل المحدد ويربط وظيفة معالج الحدث باسم الحدث. سيتم إكمال هذه العمليات تلقائيًا عند إنشاء فئة العرض. يمكننا أن نهتم أكثر ببنية فئة العرض نفسها ، بدلاً من التفكير المتعمد في كيفية ربط الأحداث.
مشكلة أخرى قد تشعر بالقلق: إذا تم إنشاء بنية DOM الخاصة بالمنظر ، فهل يوفر العمود الفقري طرقًا مقابلة للأحداث الديناميكية وإلغاء التثبيت؟
في الواقع ، لا داعي للقلق بشأن هذه المشكلة ، لأن الأحداث في الأحداث مرتبطة بعنصر EL الخاص بكائن العرض من خلال طريقة المندوب () ، بدلاً من العنصر الذي وصفه المحدد. لذلك ، بغض النظر عن كيفية تغيير الهيكل في العرض ، فإن الأحداث في الأحداث صالحة.
(إذا كنت معتادًا على jQuery ، فقد تفهم طريقة Depegate () التي يوفرها. هذه الطريقة تربط الحدث فعليًا بعنصر الطبقة الأصل ، ثم يؤدي إلى تحريك الحدث عن طريق التحقق من عنصر الطفل المستهدف أثناء فقاعة الحدث.)
يربط كائن العرض الأحداث من خلال طريقة المفوض () ، مما يعني أننا لا نحتاج إلى الاهتمام بتأثير تغييرات بنية العرض على الأحداث. وهذا يعني أيضًا أن العنصر المقابل للمحدد في الأحداث يجب أن يكون ضمن عنصر EL من العرض ، وإلا فلن تسري الأحداث المرتبطة.
ومع ذلك ، هناك بعض الحالات التي قد لا نزال بحاجة إلى ربطها يدويًا و UnlegelegateEvents () وطرق undelegateevents () يتم استخدامها لربط ديناميكي و undelegateevents () ، والتي يمكنك التعرف عليها من خلال النظر في وثائق API.
عرض طرق العرض والبيانات
يتم استخدام المشاهدات بشكل أساسي لأحداث الواجهة الربط وتقديم البيانات. ومع ذلك ، فإن كائن العرض يوفر فقط طريقة RENDING () المتعلقة بـ RENDRING () ، وهي طريقة فارغة دون أي منطق ولا توجد إشارات إلى أي مكان. نحن بحاجة إلى زيادة تحميله لتنفيذ منطق العرض الخاص بنا.
قد يحتوي العرض على الكثير من منطق الواجهة. من المستحسن أن تزيد جميع الفئات الفرعية من طريقة العرض () واستخدامها كطريقة إدخال للعرض النهائي. في تطوير الفريق ، يمكن أن يساعد الترميز بشكل صارم وفقًا للمواصفات الآخرين على فهم الكود والحفاظ عليه بشكل أفضل.