Enable stackPages on specific components only?

I have a products.html component with data loaded using AJAX and dynamically appended to the screen. On click of the single product it loads a new component called product-single.html which also loads data using AJAX. When I click the go back button from the product-single-html - it reloads the products.html data again using AJAX, I found out that setting “stackPages” to true solves this problem. I only want to enable stackPages within the products.html and product-single.html - how do I achieve this? I tried the following but it does not work:

// products.html
return {
	on: {
		pageInit: function () {
			app.views.viewMain.stackPages = true;
		}
	}
}

app.js looks like this:

var mainView = app.views.create('.view-main', {
	url: '/',
	pushState: true,
	pushStateSeparator: '#!',
	name: 'viewMain',
	preloadPreviousPage: false 
});

stackPages can only be enabled at once for all pages

Otherwise use some caching technics to avoid this

Thanks, could you share some code or link which I could use to get this to work?

I just do not want the AJAX to execute again when I got back to the products page. My AJAX method is placed within the pageInit method of the products.html, and I think Framework7 triggers pageInit again when I click go back from the product-single.html - if this is true, how can I prevent this?

Thanks,
Carl