Nativescript: Custom component inside a ListView item should receive an updated event after recycle

[drmistral]

It seems that using an xml-based custom component inside a ListView item encountres some difficulties with recycle policy.

Considering a component embedded in a list item of a ListView it happens that when a ItemList is recycled during a scroll, no updated event is sent to the custom component. That prevents the component to self-update its view and wrong (cached) data is rendered.

AFAIK workarounds for this problem are:

• replicate xml code :(
• write a full-javascript component in appropriate way. This works but becomes quickly far more complicate than using the xml approach as the component graphics gets complicate. Another problem is a programmer is required instead of an html-ist for the view :((

Any suggestion? Could it be an enhancement?

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tsonevn]

Hi @drmistral,
Thank you for the provided suggestion.
However can you provide more specific info about your case and the issue, you are facing? Also, can you describe, what you are trying to achieve in your project? It will help if you send us sample project, which demonstrates the case and can be used for debugging.

Thank you in advance for your cooperation.

[drmistral]

Hi @tsonevn, thanks for replying.

It's possible to find all issue details, including code discussion and solution in this post that I made days ago in the {N} community.
Another point is this limitation is not well described in the documentation.

After that I tried to made more components in pure-js but it's really much harder than using xml. I'm porting an app written in cordova/handlebars in {N} (using js/ts) and it is full of small widgets that refers to specific item list through parameters. Think about like/liked or follow/followed buttons and counters that change appearance depending on specific list item status, so some logic and parameters are required.

There are other minors limitations I found using custom component, but right now this is the one that in my opinion, mostly prevents to engineerize the code through components using js/ts. Unless I'm missing something about this framework.

[NickIliev]

Steps to reproduce the issue:

• Use this test applicaiton
• The listview has item templates which are loading custom component with custom parameters
• Scroll the listview and as a result, the "cached" data will be loaded instead of the actual data passed via the custom component's parameters (job and name). The issue is reproducible when the listview is scrolled. and the cells are recycled

Another issue that is closely related to the case above is an expected behavior when passing more than 1 parameter for the custom component. As a result, the data is not correctly rendered. The solution is to pass only one parameter (with complex object) as suggested by @drmistral here

[abhayastudios]

Having the same issue (but with Angular), where a custom component is fired only for the initial few items and when scrolling down cached elements are re-used.

[abhayastudios]

@vakrilov @NickIliev

Hi guys! Any way this issue could get higher priority? It is a really annoying issue for a fairly common scenario (I think) and was pushed ahead already several times.

Thanks a lot :)