SAPUI5 TypeError: this.nav.to is not a function - sapui5

Question

I'm new to SAPUI5
I'm trying to show the master page when a Tile is clicked in a home page. Below is the code that I have used with in event handler.
var context = evt.getSource().getBindingContext();
this.nav.to("Master", context);
The problem here is I am getting following error TypeError: this.nav.to is not a function
Please assist

Answer 1

What is this in your context? That depends on where your tilePressed method is defined. If it's defined in a controller, this will refer to the controller.
If it is defined statically - you often find this for formatter functions - this will refer to the control that triggered the event.
Is the variable this.nav defined and appropriatly initialized? It needs to contain some kind of NavContainer e.g. the outermost sap.m.App resp. sap.m.SplitApp.
Also check out this article on the usage of this in JavaScript and this very handy jQuery function jQuery.proxy

Answer 2

The this.nav.to() and this.nav.back() functions are not
defined in the App.controller.js. You need to write the following code
in App.controller.js so that the compiler identifies the functions
being called.
to : function (pageId, context) {
var app = this.getView().app;
// load page on demand
var master = ("Master" === pageId);
if (app.getPage(pageId, master) === null) {
var page = sap.ui.view({
id : pageId,
viewName : "ProjectPath.view." + pageId,
type : "XML"
});
page.getController().nav = this;
app.addPage(page, master);
jQuery.sap.log.info("app controller > loaded page: " + pageId);
}
// show the page
app.to(pageId);
// set data context on the page
if (context) {
var page = app.getPage(pageId);
page.setBindingContext(context);
}
},
back : function (pageId) {
this.getView().app.backToPage(pageId);
}