Passing Variables between template pages and order of page events

If I search through a list of people (search.html) and pass an ID for a person to a details page (people.html), the initial passing of the variable works (index id 0: PeopleID X12345). This done through both a href link (url variable) and an onlick event on the same href. I’ll use one of them when I figure out whats happening.

If I go back and search list again and select something different (index id 1: PeopleID Y23534), and go to the details – I get the same result from the initial search. Then go back and search results again, I get click on another result item (index id 2: PeopleID C23423) to see the details and I get the result data from previous details request (index id 1). One step behind.

When the componentUrl (people.html) data script runs, initially it seems to pickup js code in the link, but not the query variable. But the second time around, the js code doesn’t update the variable and the query is still not picked up.

Q: Why does the first result click works and then every other pull is behind one step?
Q: The query variable doesn’t get picked up when the template pulls it data in, is there a way to get the data index for something that is already in memory during this phase of page construction?

First are the logs, after that there is code/html:

– First Search, NO-ID is set.
[phonegap] [console.log] search: pageInit MyApp.data.PersonID ->NO-ID

– Click on the first result in Search,

[phonegap] [console.log] person.html: data(): MyApp.data.PersonID:X12345
[phonegap] [console.log] person.html: data(): query.PersonID:undefined
[phonegap] [console.log] 0
[phonegap] [console.log] person.html: pageMounted: X12345
[phonegap] [console.log] person.html: pageMounted: query.PersonID:X12345
[phonegap] [console.log] person.html: pageInit: X12345
[phonegap] [console.log] person.html: pageInit: query.PersonID:X12345
[phonegap] [console.log] 0
[phonegap] [console.log] 0
[phonegap] [console.log] search: pageBeforeOut
[phonegap] [console.log] search: pageBeforeOut MyApp.data.PersonID ->X12345

– Return to do next search…
phonegap] [console.log] search: pageInit MyApp.data.PersonID ->X12345

– Click on the second listed item

[phonegap] [console.log] person.html: pageAfterOut: X12345
[phonegap] [console.log] person.html: pageAfterOut: query.PersonID:undefined

[phonegap] [console.log] person.html: data(): MyApp.data.PersonID:X12345
[phonegap] [console.log] person.html: data(): query.PersonID:undefined
[phonegap] [console.log] 1
[phonegap] [console.log] person.html: pageMounted: X12345
[phonegap] [console.log] person.html: pageMounted: query.PersonID:Y23534
[phonegap] [console.log] person.html: pageInit: X12345
[phonegap] [console.log] person.html: pageInit: query.PersonID:Y23534
[phonegap] [console.log] 1
[phonegap] [console.log] 1
[phonegap] [console.log] person.html: pageBeforeOut
[phonegap] [console.log] person.html: pageBeforeOut MyApp.data.PersonID ->X12345


I have three pages:

index.html: Main Page, JS Data loads through script tags
search.html: template based page (itemTemplate) in route.js, with a searchbar and custom search
people.html: template based page using componentUrl to all-in-one page.

Three .js files, loaded in index

app.js
routes.js
data.js

app.js:
---------

var $$ = Dom7;
var ActivePersonID = “NO-ID”;
// Framework7 App main instance
var MyApp = new Framework7({
root: ‘#app’, // App root element
id: ‘com.zzz.zzz’,
name: ‘zzz’,
theme: ‘ios’,
panel: {swipe: ‘both’,},
data: function () {
return {
PersonID: ActivePersonID ,

};

},
// App routes
routes: routes
});
// Init/Create main view
var mainView = MyApp.views.create(’.view-main’, {
url: ‘/’
});

---------------------------
routes.js
---------------------------

routes = [
  {
  	name: 'home',
    path: '/',
    url: './index.html',
  },
   {
    path: '/search/',
    url: './pages/search.html',
      on: {
      	pageBeforeOut: function(event,page)
      	{
      		console.log("search: pageBeforeOut");
      		console.log("search: pageBeforeOut MyApp.data.PersonID ->"+MyApp.data.PersonID);
      	},
      	pageInit: function (event, page) {
     		console.log("search: pageInit");
      	console.log("search: pageInit MyApp.data.PersonID ->"+MyApp.data.PersonID);
  

				vlisted = MyApp.virtualList.create({
				// List Element
				el: '.virtual-list',
				// Pass array with items
				items: People,
				// Search People
				searchAll: function (query, People) {
					var found = [];
					for (var i = 0; i < People.length; i++) {
					var PeopleData = People[i].PersonName+'['+People[i].PeopleID+']'+People[i].PostalCode;
					if (PeopleData.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') 
					{
						found.push(i);
					}
				}
					return found; //return array with matched indexes
  },
  itemTemplate:
    '<li>' +
      '<a href="/people/?PersonID={{PeopleID}}" onclick="MyApp.data.PersonID=\'{{PeopleID}}\'" class="item-link item-content">' +
       '<div class="item-media"><img onerror="this.src=\'images\/person\/thumb\/default.png\'" width="66" height="48" src="images/property/thumb/{{PeopleID}}.jpg"></i></div>' +
        '<div class="item-inner">' +
          '<div class="item-title-row">' +
            '<div class="item-title">[{{PeopleID}}] {{PersonName}}</div>' +
          '</div>' +
        '</div>' +
      '</a>' +
    '</li>',
height: app.theme === 'ios' ? 63 : 73,

});
        },}
  },
  {
    path: '/people/',
    componentUrl: './pages/people.html',
      
  },
  {
    path: '(.*)',
    url: './pages/404.html',
  },
];

-----------------------------
data.js
-----------------------------

var People = [
{PeopleID: “X12345”, PersonName: “Josh”, PostalCode: “90210”},
{PeopleID: “Y23534”, PersonName: “Lynn”, PostalCode: “90210”},
{PeopleID: “C23423”, PersonName: “Bart”, PostalCode: “90210”},
{PeopleID: “A23445”, PersonName: “Chun”, PostalCode: “90210”}];

------------------------------
person.html
------------------------------

<template>
<div class="page">
	<div class="page-content" style="padding: 10px 0;">
				<div class="card">
					<div class="card-header">[{{PeopleID}}] {{PersonName}}</b> </div>
					<div class="card-content">
					
					</div>
				</div>
	</div>
</div>
</template>

<script>
  // script must return component object
  return {
    data: function () {
    	console.log("person.html: data(): MyApp.data.PersonID:"+MyApp.data.PersonID);
    	console.log("person.html: data(): query.PersonID:"+mainView.router.currentRoute.query.PersonID);
      return People[findIndexInData(People, "PeopleID", MyApp.data.PersonID)];
    },
    on: {
      pageInit: function () {
      	
      	console.log("person.html: pageInit: "+MyApp.data.PersonID);
      	console.log("person.html: pageInit: query.PropertyNumber:"+mainView.router.currentRoute.query.PersonID);
        
      },
      pageAfterOut: function () {
        // page has left the view
       	console.log("person.html: pageAfterOut: "+MyApp.data.PersonID);
      	console.log("person.html: pageAfterOut: query.PropertyNumber:"+mainView.router.currentRoute.query.PersonID);

      },
       pageMounted: function (e, page) {
     	console.log("person.html: pageMounted: "+MyApp.data.PersonID);
      console.log("person.html: pageMounted: query.PropertyNumber:"+mainView.router.currentRoute.query.PersonID);

  },
    }
  }
</script>