Knockout.js



knockout

Knockout.js

نظام Knockout هو مكتبة جافا سكريبت تساعدك على إنشاء واجهات مستخدم عرض وتحرير غنية وسريعة الاستجابة مع نموذج بيانات أساسي نظيف. في أي وقت تمتلك فيه أقسام واجهة المستخدم التي يتم تحديثها ديناميكيًا (على سبيل المثال ، تتغير حسب إجراءات المستخدم أو عندما يتغير مصدر بيانات خارجي) ، يمكن أن يساعدك KO في تنفيذها بشكل أكثر بساطة وسهولة.

ميزات العنوان الرئيسي:

  • تتبع تابع أنيق - يقوم تلقائيًا بتحديث الأجزاء الصحيحة من واجهة المستخدم الخاصة بك كلما تغير نموذج البيانات الخاص بك.
  • الارتباطات التعريفيّة - طريقة بسيطة وواضحة لتوصيل أجزاء من واجهة المستخدم الخاصة بك بنموذج البيانات الخاص بك. يمكنك إنشاء واجهات مستخدم ديناميكية معقدة بسهولة باستخدام سياقات الربط المتداخلة التعسفية.
  • قابل للتوسعة بشكل كبير - تنفيذ سلوكيات مخصصة كترميزات تعريفية جديدة لسهولة إعادة الاستخدام في بضعة أسطر من التعليمات البرمجية.

فوائد إضافية:

  • مكتبة JavaScript خالصة - تعمل مع أي خادم أو تقنية من جانب العميل
  • يمكن إضافتها أعلى تطبيق الويب الحالي دون الحاجة إلى إجراء تغييرات معمارية كبيرة
  • صغير - حوالي 13 كيلو بايت بعد gzipping
  • يعمل على أي متصفح رئيسي (IE 6+ ، Firefox 2+ ، Chrome ، Safari ، Edge ، آخرون)
  • مجموعة شاملة من المواصفات (طراز BDD المتطور) تعني أنه يمكن بسهولة التحقق من الأداء الصحيح على المتصفحات والأنظمة الأساسية الجديدة

قد يرى المطورون المطلعون على Ruby on Rails ، أو ASP.NET MVC ، أو غيرها من تقنيات MV * MVVM كشكل من أشكال MVC في الوقت الفعلي مع تركيب تفسيري. بمعنى آخر ، يمكنك التفكير في KO كطريقة عامة لإنشاء واجهات مستخدم لتحرير بيانات JSON ... أيًا كان يناسبك :)

حسنا ، كيف تستخدمها؟

الطريقة الأسرع والأكثر متعة للبدء هي العمل من خلال البرامج التعليمية التفاعلية . بمجرد أن تضطر إلى التعامل مع الأساسيات ، استكشف الأمثلة الحية ثم انتقل إليها في مشروعك الخاص.

هل تعتزم KO التنافس مع jQuery (أو Prototype ، وما إلى ذلك) أو العمل معه؟

الجميع يحب jQuery! إنه بديل رائع لواجهة برمجة التطبيقات (API) عالية الكعب وغير المطابقة التي كان علينا مواجهتها في الماضي. jQuery طريقة ممتازة منخفضة المستوى للتعامل مع العناصر ومعالجات الأحداث في صفحة ويب. KO يحل مشكلة مختلفة.

بمجرد أن تصبح واجهة المستخدم الخاصة بك غير بديهية ولديها بعض السلوكيات المتداخلة ، يمكن أن تصبح الأمور صعبة ومكلفة للحفاظ عليها إذا كنت تستخدم jQuery فقط. خذ مثالاً على ذلك: أنت تعرض قائمة بالعناصر ، وتوضح عدد العناصر في تلك القائمة ، وتريد تمكين زر "إضافة" فقط عندما يكون هناك أقل من 5 عناصر. لا يحتوي jQuery على مفهوم لنموذج بيانات أساسي ، وذلك للحصول على عدد العناصر التي يجب عليك استنتاجها من عدد TRs في جدول أو عدد DIVs مع فئة CSS معينة. ربما يتم عرض عدد العناصر في بعض SPAN ، وعليك أن تتذكر لتحديث نص SPAN عندما يضيف المستخدم عنصرًا. يجب عليك أيضًا أن تتذكر تعطيل الزر "إضافة" عندما يكون عدد TRs هو 5. في وقت لاحق ، يُطلب منك أيضًا تنفيذ زر "حذف" ويجب عليك معرفة عناصر DOM التي سيتم تغييرها عند النقر عليها.

كيف يختلف نظام Knockout؟

انها أسهل بكثير مع KO. فهو يتيح لك التوسع في التعقيد دون خوف من تقديم التناقضات. فقط قم بتمثيل العناصر الخاصة بك كمصفوفة JavaScript ، ثم استخدم الربط foreach لتحويل هذا المصفوفة إلى TABLE أو مجموعة من DIVs. كلما تتغير الصفيف ، تتغير واجهة المستخدم لتتطابق (ليس من الضروري معرفة كيفية حقن TRs جديدة أو مكان الحقن بها). تظل بقية واجهة المستخدم متزامنة. على سبيل المثال ، يمكنك ربط SPAN بطريقة عرضية لعرض عدد العناصر كما يلي:

There are <span data-bind="text: myItems().length"></span> items

هذا هو! ليس عليك كتابة التعليمات البرمجية لتحديثها؛ يقوم بتحديث من تلقاء نفسه عند تغيير صفيف myItems. وبالمثل ، لجعل الزر "إضافة" ممكّنًا أو تعطيلًا اعتمادًا على عدد العناصر ، ما عليك سوى الكتابة:

<button data-bind="enable: myItems().length < 5">Add</button>

لاحقًا ، عندما يُطلب منك تنفيذ وظيفة "الحذف" ، لن تحتاج إلى معرفة أجزاء واجهة المستخدم التي يجب أن تتفاعل معها ؛ كل ما عليك فعله هو تغيير نموذج البيانات الأساسي.

للتلخيص: لا تتنافس KO مع jQuery أو DOM APIs منخفضة المستوى مشابهة. يوفر KO طريقة تكميلية عالية المستوى لربط نموذج بيانات بواجهة مستخدم. لا تعتمد KO نفسها على jQuery ، ولكن يمكنك بالتأكيد استخدام jQuery في نفس الوقت ، وفي الواقع هذا مفيد في كثير من الأحيان إذا كنت تريد أشياء مثل التحولات المتحركة.