-
-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature request: API to be able to get references of children components created in a for-each loop #4869
Comments
One approach may be to use the Svelte store https://svelte.dev/repl/253ddd578806497b8b54c339490f8221?version=3.23.0 |
@kuhlaid I appreciate you taking time to look at this but could you please be a bit more clear? Where exactly are you saving the references to the child components in an each-block? |
@Fygo Sorry my first example was not the best for your use-case. How about https://svelte.dev/repl/28996f04783542ceafed7cc6a85128b9?version=3.23.0? I prefer to handle things this way because it does not involve complex binding and exporting properties, etc. It lets you dynamically add attributes to the 'store' for use in your components. |
@kuhlaid Thanks for the simplified example but that is not what I mean. Let me try to explain a bit more: Let's assume this setup:
Lists are created in the Container's So in Container I want to call: That should be it, all the rest should be handled within the Item, there is practically no reason why anything else should be involved. Right now I cannot save the references, so I cannot use |
No idea if this is useful, but I was finding the
As a work around, I came up with this: There are two parts doing the real work, and the rest is just a contrived user interface to demonstrate/test the technique.
I believe this solution could work for you, though it's a non trivial bit of boiler plate and it really is something of a trick. (I also tried getting more fancy, but ran into limitations of the |
I think this is a good example to use a What do you think about this? |
@intelcentre Not bad, your solution actually seems to work! I will play around with it a bit if I have some spare time next week. But jeez, saving references in an each block should be much more straightforward. I would really appreciate some simpler way to do this similar to bind:this. Pretty please, svelte devs? @PatrickG You still don't have a reference to the item, you can't call an instance method on it. |
You could use Or just send a reference to the functions you want to call. |
Has there been any new development in this area? Any new idea? |
I solved a similar problem recently by using stores and context to populate a store in the parent with child methods to call from the parent: https://svelte.dev/repl/cd2324bc4f134396896594f6621faadb?version=3.37.0 So, instead of a reference to the whole child, you just expose the things you need from it in |
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. |
This issue has been closed as it was previously marked as stale and saw no subsequent activity. |
Is your feature request related to a problem? Please describe.
I would like to call an exported function (method) of a child component through its parent. This method changes the DOM of the child, so it is for obvious reasons implemented in the child component. This works nicely when a reference can be obtained through
<Child bind:this={cmp}/>
. However, there is currently no easy way (or is there?) to obtain references to children created in a for-each loop.Describe the solution you'd like
bind:this={arrayRef}
or some similar data structure to be populated/spliced/whatever in a for-each loop. This array should always be up-to-date and contain the currently existing children.Describe alternatives you've considered
This would kind of work. But the animations ruin it. As soon as you have an animation on your child component, this is not removed and the elements array is not up-to-date. If you delete multiple items while the previous animations are still running, the array will get more and more "out of sync".
Similar example. Different approach with an object. Elements array still not up-to-date. The source of truth should be the
list
.this
reference of the child. Actually, any way to expose some API for that?How important is this feature to you?
I hit this issue 3 times in my current project. The first 2 times I just made it work in another way but now I really wanted to look into it and solve it. (I failed, obviously)
Special thanks to the guys in the Discord channel, especially to GrygrFlzr, whose example you can see above.
The text was updated successfully, but these errors were encountered: