如何安装svelte
Yesterday I had this problem: I was using a Datepicker Svelte component - 2 instances of it.
昨天我遇到了这个问题:我使用的是Datepicker Svelte组件-它有2个实例。
Just to give you more context, I want to set a starting date, and an ending date:
为了给您更多背景信息,我想设置一个开始日期和一个结束日期:
![The 2 pickers](https://i-blog.csdnimg.cn/blog_migrate/7e8f8768188a3748bb83563276fd7c36.png)
When you clicked the starting date, the date picker showed up:
当您单击开始日期时,日期选择器出现:
![The first picker](https://flaviocopes.com/svelte-rerender-on-demand/first-picker.png)
When you clicked the ending date, the second date picker showed up:
当您单击结束日期时,第二个日期选择器出现:
![The second picker](https://flaviocopes.com/svelte-rerender-on-demand/second-picker.png)
Now the problem was that based on the starting date, the end date had some constrains. For example, a logical one was that you can’t set an end date that’s prior to the starting date.
现在的问题是,基于开始日期,结束日期受到一些限制。 例如,合乎逻辑的是您不能设置结束日期早于开始日期。
The date picker component exposed a selectableCallback
function prop, called when the component is first rendered, running for all the dates in the calendar, allowing me to return false on some dates to disable them.
日期选择器组件公开了一个selectableCallback
函数道具,该组件在首次呈现时在日历中的所有日期上运行,从而允许我在某些日期返回false以禁用它们。
<script>
let endDateSelectableCallback = date => {
//TODO: decide if date is ok
}
</script>
<Datepicker
selectableCallback={endDateSelectableCallback
}>
Sounds great!
听起来不错!
Except this function only ran when the component was rendered the first time.
除了此功能,仅在首次渲染组件时运行。
I needed a way to re-run that function when the other component changed its value. So I could remove all dates prior to the starting date selected. Also, it had to run multiple times as the user could change idea.
我需要一种在其他组件更改其值时重新运行该函数的方法。 因此,我可以删除选择的开始日期之前的所有日期。 而且,它必须运行多次,因为用户可以改变想法。
So.. when selecting a date on the other component, I used the on:dateSelected
event to just reassign the function I assigned to selectableCallback
, called endDateSelectableCallback
, to itself.
所以..其他部件上选择日期时,我用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
}>
This might not be the most idiomatic Svelte code and I could probably add a refresh={refreshComponent}
prop instead. But maybe it is idiomatic, since the Svelte docs also mention adding a redundant assignment to trigger a re-render when we update a value:
这可能不是最惯用的Svelte代码,我可能可以添加refresh={refreshComponent}
。 但这也许是惯用的,因为Svelte文档还提到在我们更新值时添加冗余分配以触发重新渲染:
![The svelte docs](https://flaviocopes.com/svelte-rerender-on-demand/svelte-docs.png)
I think that this is a very specific pattern that might not be very common. I haven’t encountered this problem before, as far as I remember, so I’m happy with this solution so far - it works.
我认为这是一个非常具体的模式,可能并不常见。 就我所记得,我以前从未遇到过此问题,所以到目前为止,我对这种解决方案感到满意-它可以工作。
如何安装svelte