App.request on index.html causing error

I’m getting an error trying to use app.request on the first page of my application. It seems to work when called in other routes after the application has initially loaded so I’m not sure why it gives this error on the first page?

The error is "Cannot read property ‘request’ of undefined"

app.js file includes…

"use strict"; 
// Dom7
var $$ = Dom7;

// Init App
var app = new Framework7({
  root: '#app',
  theme: 'md',
  barsStyle: 'fill',
  routes: routes,
  view : {
	pushState: false,
	xhrCache: false,
  }
});

var url = 'https://www.myweb.ca/phonegap/';

function loadLeaderboard() {
	
	app.request.post(url+'app-get-leaderboard.php',
		{ 
		'limit': 10
		}
		, function (mydata) {
			var obj = JSON.parse(mydata);
			console.log(obj.leaderboard);
			if (obj.statusCode != 0) {
				$$("#leaderboard-top10").html(obj.leaderboard);
      		} else {
				console.log("Error");
      		}
    	//	app.preloader.hide();
 	});
}

I’m calling the leaderboard function in my routes.js file…

"use strict"; 
var routes = [
  // Index page
  {
    path: '/',
    url: './index.html',
    name: 'home',
	on: {
		pageInit: function() {
			loadMore(true, 8, 4);
			
			loadLeaderboard();
		}
	}
  },
  {
    path: '/home-2/',
    url: './pages/home-2.html',
    name: 'home-2'
  },

Это значит что app не доступен в этом контексте.

Try to change

to

Framework7.request.post