Cách kết xuất một thành phần Svelte theo yêu cầu

Cách kết xuất một thành phần Svelte theo yêu cầu và đặc biệt là cách kết xuất nó khi tôi muốn chạy lại một chức năng chống đỡ

Hôm qua tôi đã gặp sự cố này: Tôi đang sử dụng một thành phần Datepicker Svelte - 2 trường hợp của nó.

Chỉ để cung cấp cho bạn thêm ngữ cảnh, tôi muốn đặt ngày bắt đầu và ngày kết thúc:

The 2 pickers

Khi bạn nhấp vào ngày bắt đầu, công cụ chọn ngày sẽ hiển thị:

The first picker

Khi bạn nhấp vào ngày kết thúc, công cụ chọn ngày thứ hai sẽ hiển thị:

The second picker

Bây giờ vấn đề là dựa trên ngày bắt đầu, ngày kết thúc có một số ràng buộc. Ví dụ: một lôgic là bạn không thể đặt ngày kết thúc trước ngày bắt đầu.

Thành phần bộ chọn ngày đã hiển thị mộtselectableCallbackfunction prop, được gọi khi thành phần được hiển thị lần đầu tiên, chạy cho tất cả các ngày trong lịch, cho phép tôi trả về false vào một số ngày để vô hiệu hóa chúng.

<script>
let endDateSelectableCallback = date => {
  //TODO: decide if date is ok
}
</script>

<Datepicker selectableCallback={endDateSelectableCallback }>

Âm thanh tuyệt vời!

Ngoại trừ chức năng này chỉ chạy khi thành phần được hiển thị lần đầu tiên.

Tôi cần một cách để chạy lại chức năng đó khikhácthành phần đã thay đổi giá trị của nó. Vì vậy, tôi có thể xóa tất cả các ngày trước ngày bắt đầu đã chọn. Ngoài ra, nó phải chạy nhiều lần vì người dùng có thể thay đổi ý tưởng.

Vì vậy, .. khi chọn một ngày trên thành phần khác, tôi đã sử dụngon:dateSelectedsự kiện để chỉ định lại chức năng mà tôi đã giao choselectableCallback, gọi làendDateSelectableCallback, cho chính nó.

<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 }>

Đây có thể không phải là mã Svelte thành ngữ nhất và tôi có thể thêmrefresh={refreshComponent}thay vào đó chống đỡ. Nhưng có lẽ nó là thành ngữ, vì tài liệu Svelte cũng đề cập đến việc thêm một phép gán thừa để kích hoạt kết xuất lại khi chúng tôi cập nhật một giá trị:

The svelte docs

Tôi nghĩ rằng đây là một mô hình rất cụ thể và có thể không phổ biến lắm. Theo như tôi nhớ thì tôi chưa từng gặp phải vấn đề này trước đây, vì vậy tôi hài lòng với giải pháp này cho đến nay - nó hoạt động.

Tải xuống miễn phí của tôiSổ tay Svelte


Các hướng dẫn nhỏ gọn hơn: