Calling custom component from ListView (with multiple templates) receives wrong parameters



Hi all, I’m struggling around this problem.

I have a ListView of news, to be precise it uses multiple template (don’t think this is relevant).
For each news i use a simple custom component that takes the news id and prints it somewere.
The problem is that printed ids are the same for different news.
Here is the code (inpired by

This is the component call:

            <ListView items="{{ items }}" ....">
                    <template key="NEWS_A">
                            <StackLayout orientation="vertical" class="border-divider-top">
                                <tag:get tagId="{{ itemId }}"/>

Here is the custom component (.ts):

class TagGet extends View {  
    tagId: string;

// this will get called when our <GridLayout> is loaded
export function onLoad(args: any) {  
    // args.object is a reference to the view, and every View instance has a "loaded" event
    let thisView: TagGet = <TagGet>args.object;

    // only change the label's text if we were given some custom headingText
    let tagId = <Label>thisView.getViewById('tag-id');
    tagId.text = thisView.tagId;

Here is the custom component (.xml):

<StackLayout orientation="horizontal" loaded="onLoad">
    <Label id="tag-id" text="?" />

When the news list unrolls I can see printed news id that are always the first 2-3 repeated (should be all different instead)


It seems for me that likely there is a problem of binding sinchronization but can’t find out how to get working this stuff.

Thanks in advance for any suggestion.


Update: the list is doing infinite scroll through callback


It seems the loaded event received by the custom comp is not raiser for that specific custom comp but is probably related to the page, once raised is captured by the comp carring an itemId among the ones previously managed.
It could be that custom components using loaded event have troubles with pages with infinite scroll? Any experience about? :thinking: