Ok, i have a tabview with some pages in it, the first and 2nd page fetch data from the web and display it in form of a gridview . Since the UI is exactily the same in both pages i tought of just using one .xml file with it's respective .js /.ts file. and using frames in the tabview to display the same page with some condition in the frame component, like
<Frame id="firstFrame" defaultPage="home/home-page" isPage='1' />
and then in my respective .js page use something like
function pageLoaded(args) {
page = args.object;
condition = page.frame.isPage
viewModel = new Observable();
viewModel.set("items", '');
page.bindingContext = viewModel;};
where i store the "condition" in a global scope variable. and use it wherever there is come conditional rendering needed. I also store viewmodel in a global scope.
IT WORKS FINE... kinda... you see, the 2 pages are Suposed to display different data. but for dome reason, the first page displays an empty page [with no data], and the second wone works fine..
More strange, when i call a function to update the data in the 1st page, it updates it in page 2, and the page one is still blank, if i restar the app, and call the same function in page 2 (remember they are the same page), it updates page one sometimes.
Could it be that both pages are using the same Observable (items)? , if that so, how i´m supposed to bind the Observable to their respective pages?
Oh i should also menction that i use "exports.functioname = functionname" to call the function. It might be that maybe? i see that the appropiate way to do it is to bind it inside the "page-view-model" file. Could it be that?
Looking at your code, what you are facing is totally expected. The variable named condition is not specific to the page instance so it just retains the last value assigned to it.
When Page 2 is loaded the condition variable is overwritten with new value and never updated again.