5: ربط المعطيات باتجاهين AngularJs -Two way binding

السلام عليكم ورحمة الله وبركاته
سنتابع اليوم العمل على تطبيق angularJs لنستعرض المزيد من الميزات الرائعة التي يقدمها لنا اطار عمل AngularJs
سنضيف ضمن هذه الحلقة بعض الميزات التي تتيح للمستخدم ان يتحكم بترتيب العناصر ضمن قائمة الهواتف.Two_Way_Data_Binding
يتم تحقيق عملية الترتيب الديناميكي عبر اضافة خاصية جديدة لنموذج المعطيات, وربطها مع موجه التكرار angularJs Repeater directive, ونترك باقي المهمة للسحر الذي تتميز به عملية ربط المعطيات ضمن angularJs لتقوم بالمطلوب.

بالاضافة إلى صندوق البحث, سنضيف في اعلى التطبيق قائمة منسدلة drop down menu تسمح للمستخدم بأن يتحكم بترتيب العناصر المعروضة ضمن قائمة الهواتف
تذكير:
لتشغيل المشروع ضمن المتصفح اتبع الخطوات التالية:
• عن طريق سطر الأوامر cmd ننتقل إلى المجلد الذي يحوي المشروع
• ثم نكتب التعليمة التي تقوم بتشغيل السيرفر
Npm start
• ما ان يتم تنفيذ التعليمة حتى يعمل السيرفر على البورت 8000
http://localhost:8000/app/
• ويصبح بإمكاننا استعراض التطبيق عن طريق المتصفح

لتحميل تعديلات كود هذا الدرس من ال GIT ادخل التعليمة التالية ضمن سطر الاوامر الخاص ب git كما اشرنا في الدروس السابقة
Git checkout –f step-4
سيتم ادراج التعديلات المهمة على الكود ادناه. بإمكانك ان ترى الفروقات الكاملة بالكود من الرابط التالي على GIT GitHub.

القالب Template
App/index.html

index.PNG

اجرينا التعديلات التالية على ملف index.html

في البداية, اضفنا عنصر <select> باسم orderProp, وبالتالي يستطيع المستخدم ان يختار قيمة من القيمتين المحددتين للترتيب.

illustration.PNG

ومن ثم اضفنا إلى عملية الفلترة على العنصر الذي يحوي موجه التكرار الفلترة وفق العنصر المسمى ngProp.
يقوم في هذه الحالة Angular بإنشاء ربط معطيات باتجاهين بين العنصر الذي تم اختياره وبين نموذج المعطيات المسمى orderProp.
ومن ثم يتم استخدام orderProp كدخل للفلتر orderBy.
وكما ناقشنا ضمن مقطع ربط المعطيات سابقا, فإن اي تغير على نموذج المعطيات سوف يؤدي إلى تغير البينات التابعة له والتي يتم عرضها على الواجهة مباشرة.
عملية الفلترة تتم بهذه البساطة!! دون الحاجة إلى اضافة اي كود اخر.

المتحكم Controller

app/js/controller.js

controller

  • كما نلاحظ, فإننا قد قمنا بتعديل نموذج المعطيات phones باضافة خاصية جديدة تدعى age إلى معلومات كل هاتف من الهواتف, تستخدم هذه الميزة لترتيب الهواتف بحسب العمر age – الخاصية التي تمت اضافتها.
  • كما اننا اضفنا سطر آخر إلى كود المتحكم, والذي نحدد عبره القيمة الافتراضيية ل orderProp لتكون في البداية مساوية لage – اي الترتيب بحسب خاصة age.

الفرصة الآن سانحة للحديث عن ربط المعطيات ثنائي الاتجاهtwo-way data-binding .
لاحظ بأنه عند تحميل التطبيق ضمن المتصفح, فإن العنصر “Newest” من القائمة المنسدلة يتم اختياره بشكل تلقائي.
ويعود لذلك بسبب اسنادنا القيمة age إل orderProp ضمن المتحكم.
وبالتالي فإن عملية الربط تتم بالاتجاه من نموذج المعطيات model إلى واجهة المستخدم UI.
الآن, في حال قمت باختيار “Alphabetically” من القائمة المنسدلة, سيتم عندها تحديث النموذج بالاضافة إلى تحديث قائمة الهواتف المعروضة. هذا يعني بأن ربط المعطيات يتم بهذا الاتجاه الآخر ايضا – من واجهة المستخدم UI إلى نموذج المعطيات model.

تجارب

  • سنقوم هنا بإزالة العبارة التي تحدد القيمة الافتراضية لترتيب العناصر orderProp 359796918من المتحكم, سنلاحظ تغيرترتيب العناصر
  • سوف نضيف ايضا الربط {{orderProp}} إلى الصفحة Index.html لنلاحظ القيمة الحالية للترتيب.
  • نعكس ترتيب العناصر عبد اضافة رمز “-“ قبل قيمة الفرز, ايلقد تعلمنا ضمن هذه الحلقة بعض المميزات المهمة والرائعة ضمن angularJs التي تختصر لنا الكثير من الوقت والكود, لننتقل إلى درس قادم نتحدث عبره عن dependency Injection. وإلى
  • ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته

 المصدر

https://docs.angularjs.org/tutorial

الترجمة المصطلح
الموجه Directive
تعبير Expression
الربط Binding
سياق Context
نطاق Scope
موديول – وهو ما يشبه الحزمة Module
ربط المعطيات ثنائي الاتجاه two-way data-binding

 

Advertisements

,

  1. أضف تعليق

اترك رد

Please log in using one of these methods to post your comment:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

%d مدونون معجبون بهذه: