Global Context problem updating the data.... with infinite scroll method

1

I have this in data function on enter page for instance:

var app = new Framework7({
data: function () {
return {
userName: ‘johndoe’,
}
}
});

then inside the method loadMore I update the name using:

app.data.userName = ‘othername’

in my handlebar template I print

{{userName}}

the problem it is that {{userName}} is not updated when printing the data in the template…

I am using Infinite scroll and loadMore function is run everytime I reach the bottom of the list adding a new card from a template var… containing {{userName}} but the name showing it is always johndoe in every new card added…

How can I update or change the content of the global var userName in this case?

thanks