تم تضمين هذا بالفعل في الريبو، ولكن تم تحديثه للتحقق من البرنامج النصي.
يأتي HTMLX مزودًا بجميع الكلمات الرئيسية المفضلة لديك والملحقة بـ hx-.
# General format is hx-[verb]hx-get # HTTP GEThx-post # HTTP POSThx-put # HTTP PUThx-patch # HTTP PATCHhx-delete # HTTP DELETEhx-swap # update content of an elementhx-target # specify element to affecthx-trigger # action that executes function
هناك المزيد، ولكن هذه هي العناصر الرئيسية المستخدمة في هذا المشروع.
لإجراء اختبار بسيط، في ./internal/views/components/logo.templ، داخل علامة الفتح ، سنقوم بإضافة hx-get=\\\"/\\\" وhx-trigger=\\\"click \\\".
افتح جهازك الطرفي وقم بتشغيل:
templ generatego run ./cmd/server/main.go
انتقل الآن إلى متصفحك وانتقل إلى المضيف المحلي:[YOUR PORT]/. انقر على Gopher، ويجب أن ترى... حسنًا، لقد حدث ذلك بسرعة كبيرة، وربما لم تلاحظ ذلك. هذا جيد. افتح أدوات المطور، وانتقل إلى علامة التبويب \\\"المفتش\\\". انقر فوق غوفر مرة أخرى. يجب أن تلاحظ التحديث في HTML في علامة التبويب \\\"المفتش\\\".
هذا هو خبز وزبدة HTMLX. وهذا ما يمنحنا واجهة المستخدم/تجربة المستخدم سريعة الاستجابة التي نبحث عنها. الآن، يحتاج hx-swap، رغم بساطته في الاسم، إلى دراسة متأنية لموقعه. وأعني بهذا عدم وضعه حيث يتداخل مع العناصر الأخرى.
مثال:
// container // end actorسيؤدي وضع كل عناصر التحكم على الزر إلى مسح كل شيء ومنع عرض الزر للتحديث. ومع ذلك، إذا قمنا بنقل بعض العمل إلى الحاوية:
// container// end actor الآن، عندما ننقر على الزر، يتم تغيير البيانات الموجودة داخل الحاوية فقط، باستثناء أنه يوجد الآن زر لمزيد من التحرير.
إضافة
أتوقف هنا لسببين (2).
أولاً، يمكنك استخدام htmx وتخصيص موقعك به كما هو. ثانيًا، يمكننا إرجاع كود html باستخدام http.Reponse. وبالامتداد، يمكننا تمرير مكونات templ أيضًا. هل ترى إلى أين يتجه هذا؟قريباً
إعادة هيكلة كاملة ونقل الوظائف إلى Go HandlerFunc()s.
","image":"http://www.luping.net/uploads/20241005/17281148536700f0a57a72a.png","datePublished":"2024-11-07T13:21:30+08:00","dateModified":"2024-11-07T13:21:30+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"إضافة HTML إلى GO
تم النشر بتاريخ 2024-11-07تصفح:277
HTMX هو خليفة intercooler.js، حيث يتم استخدامه لتوسيع HTML بأوامر HTTP دون الحاجة إلى كتابة واجهة برمجة التطبيقات. الآن، أعرف في البداية أنني قلت إنني أقوم بإزالة طبقات التجريد، لكنني أكثر من مبرمج أنظمة/أدوات، لذلك ما زلت بحاجة إلى بعض التجريدات حتى أحصل على فهم لما يحدث بالفعل تحتها.
المفهوم الأساسي
ينشر HTML أوامر AJAX لتعديل أحد العناصر. هذا مشابه لكيفية عمل ReactJs. يسمح ReactJs بتحديث المحتوى، بينما يفي HTML بذلك بالنسبة لـ HTML.
استيراد HTML
تمت إضافة سطر واحد بسيط إلى عنصر ./internal/views/layout.templ
.
تم تضمين هذا بالفعل في الريبو، ولكن تم تحديثه للتحقق من البرنامج النصي.
باستخدام لغة HTML
يأتي HTMLX مزودًا بجميع الكلمات الرئيسية المفضلة لديك والملحقة بـ hx-.
# General format is hx-[verb] hx-get # HTTP GET hx-post # HTTP POST hx-put # HTTP PUT hx-patch # HTTP PATCH hx-delete # HTTP DELETE hx-swap # update content of an element hx-target # specify element to affect hx-trigger # action that executes functionهناك المزيد، ولكن هذه هي العناصر الرئيسية المستخدمة في هذا المشروع.
لإجراء اختبار بسيط، في ./internal/views/components/logo.templ، داخل علامة الفتح
، سنقوم بإضافة hx-get="/" وhx-trigger="click ".
افتح جهازك الطرفي وقم بتشغيل:
templ generate go run ./cmd/server/main.goانتقل الآن إلى متصفحك وانتقل إلى المضيف المحلي:[YOUR PORT]/. انقر على Gopher، ويجب أن ترى... حسنًا، لقد حدث ذلك بسرعة كبيرة، وربما لم تلاحظ ذلك. هذا جيد. افتح أدوات المطور، وانتقل إلى علامة التبويب "المفتش". انقر فوق غوفر مرة أخرى. يجب أن تلاحظ التحديث في HTML في علامة التبويب "المفتش".
HX-SWAP
هذا هو خبز وزبدة HTMLX. وهذا ما يمنحنا واجهة المستخدم/تجربة المستخدم سريعة الاستجابة التي نبحث عنها. الآن، يحتاج hx-swap، رغم بساطته في الاسم، إلى دراسة متأنية لموقعه. وأعني بهذا عدم وضعه حيث يتداخل مع العناصر الأخرى.
مثال:
// container // end actor// end-containerسيؤدي وضع كل عناصر التحكم على الزر إلى مسح كل شيء ومنع عرض الزر للتحديث. ومع ذلك، إذا قمنا بنقل بعض العمل إلى الحاوية:
// container// end-container// end actor الآن، عندما ننقر على الزر، يتم تغيير البيانات الموجودة داخل الحاوية فقط، باستثناء أنه يوجد الآن زر لمزيد من التحرير.
إضافة
أتوقف هنا لسببين (2).
أولاً، يمكنك استخدام htmx وتخصيص موقعك به كما هو. ثانيًا، يمكننا إرجاع كود html باستخدام http.Reponse. وبالامتداد، يمكننا تمرير مكونات templ أيضًا. هل ترى إلى أين يتجه هذا؟قريباً
إعادة هيكلة كاملة ونقل الوظائف إلى Go HandlerFunc()s.
بيان الافراج تم نشر هذه المقالة على: https://dev.to/caffeineordeath/adding-htmx-to-go-2cah?1 إذا كان هناك أي انتهاك، يرجى الاتصال بـ [email protected] لحذفهأحدث البرنامج التعليمي أكثر>
كيفية إعادة توجيه أنواع متعددة للمستخدمين (الطلاب والمعلمين والمسؤولين) إلى أنشطتهم في تطبيق Firebase؟تسجيل الدخول. يدير الكود الحالي بنجاح إعادة التوجيه لنوعين للمستخدمين ، ولكنه يواجه تحديات عند محاولة دمج النوع الثالث (المسؤول). يخطط المخطط الأص...برمجة نشر في 2025-05-05دراسة اللغة الصينية
- 1 كيف تقول "المشي" باللغة الصينية؟ 走路 نطق الصينية، 走路 تعلم اللغة الصينية
- 2 كيف تقول "استقل طائرة" بالصينية؟ 坐飞机 نطق الصينية، 坐飞机 تعلم اللغة الصينية
- 3 كيف تقول "استقل القطار" بالصينية؟ 坐火车 نطق الصينية، 坐火车 تعلم اللغة الصينية
- 4 كيف تقول "استقل الحافلة" باللغة الصينية؟ 坐车 نطق الصينية، 坐车 تعلم اللغة الصينية
- 5 كيف أقول القيادة باللغة الصينية؟ 开车 نطق الصينية، 开车 تعلم اللغة الصينية
- 6 كيف تقول السباحة باللغة الصينية؟ 游泳 نطق الصينية، 游泳 تعلم اللغة الصينية
- 7 كيف يمكنك أن تقول ركوب الدراجة باللغة الصينية؟ 骑自行车 نطق الصينية، 骑自行车 تعلم اللغة الصينية
- 8 كيف تقول مرحبا باللغة الصينية؟ # نطق اللغة الصينية، # تعلّم اللغة الصينية
- 9 كيف تقول شكرا باللغة الصينية؟ # نطق اللغة الصينية، # تعلّم اللغة الصينية
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.
Copyright© 2022 湘ICP备2022001581号-3
![\\\"Adding](\\\"/uploads/20241005/17281148536700f0a57c124.jpg\\\")
