يأتي Discourse 3.1.0.beta6 مع واجهة برمجة تطبيقات جديدة تمامًا قائمة على المكونات DModal<.
يحل هذا محل واجهة برمجة التطبيقات القديمة القائمة على المتحكمات (controller-based API)، والتي تم إهمالها الآن. إذا كان لديك نماذج (modals) موجودة تستخدم واجهات برمجة التطبيقات القديمة، فراجع دليل الترحيل هنا.
عرض نموذج (Modal)
يتم عرض النماذج عن طريق تضمين المكون DModal< في قالب (template) هاندل بارز (handlebars). إذا لم يكن لديك قالب مناسب بالفعل، فتحقق من Using Plugin Outlet Connectors from a Theme or Plugin.
قد يبدو النموذج البسيط شيئًا كهذا:
<DButton
@translatedLabel="إظهار النموذج"
@action={{fn (mut this.modalIsVisible) true}}
/>
{{#if this.modalIsVisible}}
<DModal @title="نموذجي" @closeModal={{fn (mut this.modalIsVisible) false}}>
أهلاً بالعالم، هذا بعض المحتوى في نموذج
</DModal>
{{/if}}
mutهنا كطريقة مقتصرة على hbs لتعيين قيمة. يمكنك أيضًا تعيينmodalIsVisibleباستخدام أي طريقة Ember قياسية أخرى.
سيؤدي هذا المثال إلى إنشاء نموذج بسيط مثل هذا:
التغليف في مكون (Component)
قبل إدخال المزيد من التعقيد، من الأفضل عادةً تغليف النموذج الجديد الخاص بك في تعريف المكون الخاص به. لننقل محتويات DModal< إلى داخل مكون MyModal< /> جديد
{{! components/my-modal.hbs }}
<DModal @title="نموذجي" @closeModal={{@closeModal}}>
أهلاً بالعالم، هذا بعض المحتوى في نموذج
</DModal>
سيسمح إدخال ملف مكون .js مصاحب بإدخال منطق وحالة أكثر تعقيدًا.
لاستخدام المكون الجديد، قم بتحديث موقع الاستدعاء للإشارة إليه، مع التأكد من تمرير وسيطة (argument) @closeModal.
<DButton
@translatedLabel="إظهار النموذج"
@action={{fn (mut this.modalIsVisible) true}}
/>
{{#if this.modalIsVisible}}
<MyModal @closeModal={{fn (mut this.modalIsVisible) false}} />
{{/if}}
إضافة تذييل (Footer)
تحتوي العديد من النماذج على نوع من الدعوة إلى اتخاذ إجراء (call-to-action). في Discourse، تميل هذه إلى أن تكون موجودة في الجزء السفلي من النموذج. لجعل هذا ممكنًا، يحتوي DModal< على عدد من “الكتل المسماة” (named blocks) التي يمكن عرض محتوى بداخلها. إليك المثال المحدث لتضمين زرين في التذييل، أحدهما هو زر DModalCancel القياسي الخاص بنا
<DModal @title="نموذجي" @closeModal={{@closeModal}}>
<:body>
أهلاً بالعالم، هذا بعض المحتوى في نموذج
</:body>
<:footer>
<DButton class="btn-primary" @translatedLabel="إرسال" />
<DModalCancel @close={{@closeModal}} />
</:footer>
</DModal>
عرض نموذج من سياق غير hbs
من الناحية المثالية، يجب عرض مثيلات DModal< من داخل قالب Ember handlebars باستخدام التقنية التصريحية الموضحة أعلاه. إذا لم يكن ذلك ممكنًا لحالة الاستخدام الخاصة بك (على سبيل المثال، تحتاج إلى تشغيل نموذج من أنظمة العرض القديمة لـ Discourse “raw-hbs” أو “widget”)، فيمكن القيام بذلك عن طريق حقن خدمة modal واستدعاء modal.show().
تأكد من أنك قمت بتغليف النموذج الخاص بك في المكون الخاص به كما هو موضح أعلاه. ثم قم بتشغيل النموذج عن طريق تمرير مرجع لفئة المكون الخاصة بك إلى showModal:
import MyModal from "discourse/components/my-modal";
// (حقن خدمة النموذج في المكان ذي الصلة)
// أضف هذا الاستدعاء في أي وقت تريد فيه فتح النموذج.
// سيتم تمرير وسيطة `@closeModal` إلى المكون الخاص بك تلقائيًا.
this.modal.show(MyModal);
// اختياريًا، قم بتمرير معلمة '`model`'. يتم تمريرها كـ `@model` إلى المكون الخاص بك.
// يمكن أن يشمل هذا البيانات، وكذلك الإجراءات/ردود الاتصال (callbacks) التي يستخدمها النموذج الخاص بك.
this.modal.show(MyModal, {
model: { topic: this.topic, someAction: this.someAction },
});
// تُرجع `modal.show()` وعدًا (promise)، لذا يمكنك الانتظار حتى يتم إغلاقه
// سيتم حله بالبيانات المارة إلى إجراء `@closeModal`
const result = await this.modal.show(MyModal);
المزيد من التخصيص!
يحتوي DModal< على عدد من الكتل المسماة والوسائط. تحقق من دليل الأنماط التفاعلي لمعرفة الوسائط، و تنفيذ قالب d-modal لمعرفة الكتل المسماة.
يتم التحكم في إصدار هذه الوثيقة - اقترح تغييرات على github.