كيفية استخدام جهاز التحكم عن بعد: صحيح لإجراء مكالمات Ajax في القضبان

وثائق Rails عن بعد: صواب كبيرة في شرح كيفية إضافة المساعد إلى وجهات نظرك. ومع ذلك ، فإنه لا يفسر تمامًا كيفية التحكم عن بعد: صحيح يعمل جنبًا إلى جنب مع وحدة تحكم وملف Javascript لإنشاء وإدارة استجابات JSON لاستدعاء ajax. يتضمن AJAX طلب (متصفح) clientide إلى الخادم الخاص بك والذي يولد استجابة للعميل الذي يجب التعامل معه.

يوجد أدناه برنامج تعليمي قصير حول كيفية صياغة الدائرة الكاملة للطلب والاستجابة عن بُعد: مكالمات ajax الحقيقية في Rails.

طريقة العرض: جعل طلب اياكس مع البعيد: صحيح

<٪ = link_to "Add a Book" ، books_path ، class: "add"، remote: true٪>

يمكنك إضافة جهاز التحكم عن بعد Rails: true إلى أي مساعد Rails آخر يقوم بإنشاء طلب ويب. توفر مستندات Rails عدة أمثلة مفيدة لإضافة المساعد إلى form_for و form_tag و link_to و button_to.

بمجرد الإضافة ، يقوم جهاز التحكم عن بعد: true بإيقاف الإجراء الافتراضي للكائن (المعروف أيضًا باسم preventDefault () في Javascript) وبدلاً من ذلك يقوم بطلب غير متزامن لإجراء تحكم مناسب. ستحتاج إلى التأكد من توفير مسار لنوع الطلب المناسب. في المثال أعلاه ، استخدمت إجراء طلب POST للكتب # قم بإنشاء إجراء في BooksController باستخدام books_path المساعد الخاص به.

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

المراقب: تلقي الطلب وتوليد استجابة

حسنًا ، لقد قدمت طلبك والآن أنت بحاجة إلى إعداد وحدة التحكم لاستلامها. للتحقق من عمل جهاز التحكم عن بعد: true ، أدخل مصحح أخطاء (pry ، byebug ، وما إلى ذلك) في الجزء العلوي من إجراء وحدة التحكم الخاصة بك وابدأ استدعاء ajax عبر كائن النموذج أو الارتباط بالنقر فوقها في المستعرض الخاص بك. من المفترض أن ترى نافذة مصحح الأخطاء مفتوحة وتأكد من أن إجراء وحدة التحكم قد تحقق بالفعل. إذا لم يتم إنشاء مصحح الأخطاء ، فتحقق من ملف route.rb الخاص بك للتأكد من أنك قد أعلنت بشكل صحيح مسارًا لهذا الإجراء. الإقران الشائع هو نموذج يقدم طلب POST لإجراء إنشاء وحدة تحكم أو زر حذف يقدم طلب DELETE لإجراء التدمير لوحدة التحكم.

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

سوف كائنات الطلب المختلفة إنشاء أنواع مختلفة من params. سيحتوي النموذج على تجزئة معلمة مألوفة لجميع قيم النموذج بالإضافة إلى بعض معلومات التغليف. قد يحتوي الرابط فقط على وحدة التحكم والإجراء المذكور دون أي شيء آخر. في أي من هذه الحالات ، قد تجد نفسك بحاجة إلى تمرير معلومات إضافية إلى المعاملات مع طلبك. يمكنك القيام بذلك عن طريق إضافتها إلى مساعد المسار (رابط ، زر) أو مع حقل مخفي (نماذج) مثل ذلك:

<٪ = link_to "إضافة كتاب" ، books_path (book_id: book.id) ، class: "add"، remote: true٪>

ستشمل المعاملات الآن مفاتيحك وقيمك المزودة مثل:

{"controller" => "books"، "action" => "create"، "book_id" => "42"}

الآن سأفترض أنك تعرف كيفية إنشاء أو إنشاء أو إتلاف أو تحزيم كائن بطريقة أخرى مع هذه المعلمات وأنك قمت بتخزينه الآن في متغير مثيل مثلbook.

والخطوة التالية هي تقديم استجابة JSON مرة أخرى إلى عنصر DOM الذي قدم طلب ajax. يمكن لوحدة التحكم في Rails التعامل مع هذا تمامًا كما يمكنها التعامل مع أجزاء التقديم ، أو إعادة التوجيه إلى طرق جديدة ، أو أي عدد من أنشطة التوجيه التالية. أسهل طريقة للقيام بذلك هي ببساطة تقديم الكائن كـ JSON:

تقديم json:book

سيؤدي ذلك إلى تزويد الكائن المستلم بسمات حول كائن الكتاب. ومع ذلك ، نظرًا لأنك تعود إلى ملف Javascript لا يمكنه الوصول إلى قاعدة بياناتك أو إلى مساعدي Rails مباشرةً ، فقد تحتاج إلى توفير سلسلة من HTML تحتوي على كل شيء سيحتاج ملف JS إلى إدراج عنصر كتاب جديد في DOM . دعنا نقول أنك ترغب في إدراج جزء يحتوي على معلومات حول الكتاب وكذلك حول المستخدم الذي أضاف الكتاب. إليك استجابة JSON موسعة يمكنك إنشاؤها:

render json: {book: render_to_string ('books / _book'، layout: false، locals: {book:book،user})}

ما سبق يرشد إجراء إنشاء وحدة التحكم لإرجاع كائن JSON يحتوي على معلومات حول المراجعة. على وجه التحديد ، يحتوي على جزء محدد من HTML مأخوذ من جزء في طرق العرض الخاصة بك يوفر معلومات حول متغيرين مثيل تقوم بتوفيرهما كمتغيرات محلية للجزء الجزئي. يعجبني هذا الأسلوب لأنه يسمح لك بإنشاء عناصر DOM من القوالب في طرق عرض ملف Rails ERB بدلاً من الاحتفاظ بها بتات عائمة من HTML في ملفات JS الخاصة بك.

جافا سكريبت: معالجة الاستجابة ومعالجة DOM

أنت على وشك الإنتهاء! لديك الآن رابط يقوم بإنشاء طلب ويب بعيد أو غير متزامن لإجراء إنشاء وحدة التحكم الخاصة بك. يقوم إجراء وحدة التحكم هذا بإنشاء استجابة JSON تحتوي على معلومات حول كائن تم إعداده بواسطة وحدة التحكم. كل ما تبقى هو اتخاذ هذا الرد JSON واستخدامه للتعامل مع DOM - وبعبارة أخرى ، لتظهر للمستخدم ما فعلته نقراتهم للتو.

في ملف Javascript الخاص بك ، ستحتاج إلى تحديد العنصر الذي قدم الطلب الأصلي وإعداد حدث للاستماع إلى نجاح طلب ajax على هذا العنصر. هذا سهل للغاية مع jQuery ومع الفصل الذي أضفناه إلى مساعدنا link_to في وقت سابق في البرنامج التعليمي:

$ (add. add a ’). on ('ajax: success'، addBook)

هذا يخبر المستعرض بالاستماع إلى حدث نجاح ajax (مكالمة AJAX مكتملة بنجاح تُرجع حالة 200) على الرابط في الفئة "إضافة". وبمجرد حدوث حدث النجاح ، يجب تشغيل وظيفة رد اتصال addBook.

كل ما تبقى هو إنشاء وظيفة addBook باستخدام بيانات JSON التي تم تمريرها إلى رد الاتصال:

وظيفة الوظيفة الإضافية (الحدث ، البيانات) {
  $ ( '. كتاب القائمة'). إلحاق (data.book)
}

نحن هنا نتلقى الحدث (الحدث) و JSON (البيانات) مرة أخرى كمعلمات في رد الاتصال لدينا. بعد ذلك ، نقوم بإلحاق بيانات الكتاب من JSON إلى DOM في فئة "قائمة الكتب" المسماة بشكل ملائم. هنا data.book يحتوي على كتاب جزئي مصادق يحتوي على معلومات حول كتابنا والمستخدم للعرض.

يعد إدراج كائن آخر أمرًا بسيطًا مثل توفيره مرة أخرى في وحدة التحكم عبر JSON والرجوع إليه هنا أو إدخال سلسلة من HTML تم إنشاؤها يدويًا من ملف Javascript. يمكنك أيضًا إضافة فئات ، وتغيير قيم الأزرار ، أو القيام بأي عدد من المعالجات الأخرى التي تقدم للمستخدم دليلًا مرئيًا على أن نقراته قد أدت إلى حدوث تغيير في الحالة وسجلته.

هام: يمكنك أيضًا توفير وظيفة رد اتصال لتشغيلها إذا كان طلب ajax ينشئ استجابة خطأ. سيكون الحدث للاستماع إليه عندئذٍ خطأ تقوم بتحديد رد اتصال منفصل له. يمكنك عرض نافذة منبثقة أو تحديث حقل النموذج في رد الاتصال هذا حتى يعرف المستخدم فشل إجراء ما بطريقة أو بأخرى:

$ (add. add a ’). on ('ajax: error'، displayError)

هذا هو!

الآن لديك كل ما تحتاجه للقيام بكل من clientide و serveride للعمل لمعالجة طلبات ajax والاستجابات في تطبيق Rails الخاص بك. استمتع بإضافة سلوكيات غير متزامنة ونقل التطبيق الخاص بك أقرب وأقرب إلى تجربة صفحة واحدة (التخلص من طلبات الويب المزعجة والكامنة!). سيكون المستخدمون لديك أفضل بكثير لذلك.