كيفية عرض مكون Svelte عند الطلب

كيفية عرض مكون Svelte عند الطلب وعلى وجه الخصوص كيفية عرضه عندما أريد تشغيل خاصية دالة مرة أخرى

بالأمس واجهت هذه المشكلة: كنت أستخدم مكون Datepicker Svelte - مثيلات 2 منه.

فقط لإعطائك المزيد من السياق ، أريد تحديد تاريخ البدء وتاريخ الانتهاء:

The 2 pickers

عندما نقرت على تاريخ البدء ، ظهر منتقي التاريخ:

The first picker

عندما نقرت على تاريخ الانتهاء ، ظهر منتقي التاريخ الثاني:

The second picker

المشكلة الآن هي أنه بناءً على تاريخ البدء ، كان لتاريخ الانتهاء بعض القيود. على سبيل المثال ، من المنطقي أنه لا يمكنك تعيين تاريخ انتهاء قبل تاريخ البدء.

عرض مكون منتقي التاريخ ملف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 تذكر أيضًا إضافة مهمة زائدة عن الحاجة لتشغيل إعادة تصيير عندما نقوم بتحديث قيمة:

The svelte docs

أعتقد أن هذا نمط محدد للغاية وقد لا يكون شائعًا جدًا. لم أواجه هذه المشكلة من قبل ، بقدر ما أتذكر ، لذلك أنا سعيد بهذا الحل حتى الآن - إنه يعمل.

تحميل مجانيكتيب Svelte

كيفية عرض مكون Svelte عند الطلب

كيفية عرض مكون Svelte عند الطلب وعلى وجه الخصوص كيفية عرضه عندما أريد تشغيل خاصية دالة مرة أخرى

المزيد من البرامج التعليمية svelte: