كيفية عرض مكون Svelte عند الطلب وعلى وجه الخصوص كيفية عرضه عندما أريد تشغيل خاصية دالة مرة أخرى
بالأمس واجهت هذه المشكلة: كنت أستخدم مكون Datepicker Svelte - مثيلات 2 منه.
فقط لإعطائك المزيد من السياق ، أريد تحديد تاريخ البدء وتاريخ الانتهاء:
عندما نقرت على تاريخ البدء ، ظهر منتقي التاريخ:
عندما نقرت على تاريخ الانتهاء ، ظهر منتقي التاريخ الثاني:
المشكلة الآن هي أنه بناءً على تاريخ البدء ، كان لتاريخ الانتهاء بعض القيود. على سبيل المثال ، من المنطقي أنه لا يمكنك تعيين تاريخ انتهاء قبل تاريخ البدء.
عرض مكون منتقي التاريخ ملفselectableCallback
دالة prop ، تُستدعى عند تقديم المكوِّن لأول مرة ، وتعمل لجميع التواريخ في التقويم ، مما يسمح لي بإرجاع القيمة false في بعض التواريخ لتعطيلها.
<script>
let endDateSelectableCallback = date => {
//TODO: decide if date is ok
}
</script>
<Datepicker
selectableCallback={endDateSelectableCallback
}>
يبدو عظيما!
باستثناء تشغيل هذه الوظيفة فقط عندما يتم تقديم المكون في المرة الأولى.
كنت بحاجة إلى طريقة لإعادة تشغيل هذه الوظيفة عندما يكون ملفآخرعنصر تغير قيمته. لذلك يمكنني إزالة جميع التواريخ السابقة لتاريخ البدء المحدد. أيضًا ، كان يجب تشغيله عدة مرات حيث يمكن للمستخدم تغيير الفكرة.
لذلك .. عند تحديد تاريخ على المكون الآخر ، استخدمت ملفon:dateSelected
لمجرد إعادة تعيين الوظيفة التي عينتها لهاselectableCallback
، مسمىendDateSelectableCallback
، إلى نفسها.
<script>
let endDateSelectableCallback = date => {
//TODO: decide if date is ok
}
</script>
<!-- first date picker, start date -->
<Datepicker on:dateSelected={e => {
endDateSelectableCallback=endDateSelectableCallback;
}}>
selectableCallback={endDateSelectableCallback
}>
<!-- second date picker, end date -->
<Datepicker selectableCallback={endDateSelectableCallback
}>
قد لا يكون هذا هو كود Svelte الأكثر اصطلاحًا ويمكنني على الأرجح إضافة ملفrefresh={refreshComponent}
دعم بدلا من ذلك. ولكن ربما يكون ذلك اصطلاحيًا ، نظرًا لأن مستندات Svelte تذكر أيضًا إضافة مهمة زائدة عن الحاجة لتشغيل إعادة تصيير عندما نقوم بتحديث قيمة:
أعتقد أن هذا نمط محدد للغاية وقد لا يكون شائعًا جدًا. لم أواجه هذه المشكلة من قبل ، بقدر ما أتذكر ، لذلك أنا سعيد بهذا الحل حتى الآن - إنه يعمل.
تحميل مجانيكتيب Svelte
المزيد من البرامج التعليمية svelte:
- الشروع في العمل مع Svelte - برنامج تعليمي قصير
- كيفية العمل مع الدعائم في Svelte
- كيفية استيراد المكونات في Svelte
- كيفية تصدير الوظائف والمتغيرات من مكون Svelte
- قوالب Svelte: المنطق الشرطي
- كيفية عرض مكون Svelte عند الطلب
- فتحات رشيقة
- كيفية إضافة التعليقات في قوالب Svelte
- Svelte Bindings
- معالجة تحديثات الحالة في Svelte
- جمل رد الفعل في Svelte
- أحداث دورة الحياة الرشيقة
- قوالب Svelte: الحلقات
- حل الوعود في قوالب Svelte
- العمل مع الأحداث في Svelte
- إدارة الحالة عبر المكونات في Svelte
- كيفية الوصول إلى معلمة URL في Sapper خارج وحدة البرنامج النصي
- كيفية تطبيق CSS ديناميكيًا في Svelte
- كيفية إعادة التوجيه إلى عنوان URL في Sapper
- كيفية محاكاة حلقة for في قوالب Svelte