Issues with scope of "this." object reference: Can't access model in onInit

Question

I have issues understanding the change of the this reference in my code. So there are three things I don't get:

1. When I try to get my model in the onInit, I get:

   "Cannot read property 'getProperty' of undefined".

   But I can access the model of my view within the XML view since I defined the model in my manifest.json and use the manifest in my app Component. Why can't I access the model in the controller via this.getView().getModel?

2. In my onDetailRouteHit method, I can get the model perfectly fine with this.getView().getModel.

3. When I call the _Test method, I get this error again:

   "Cannot read property 'getProperty' of undefined"

So why can't I access the model in the onInit but in the onDetailRouteHit? And why can I access it in the onDetailRouteHit but not in the function I call after that? I'm used to Java where the this references the current object what I assume to be the controller I'm currently in in my example.

Are there "rules" of the this scope in JS / UI5?

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";

  return Controller.extend("test.controller.Detail", {
    onInit: function() {
      var array1 = this.getView().getModel("myData").getProperty("/myDataSet");
      this.oRouter = this.getOwnerComponent().getRouter();
      this.oRouter.getRoute("detail").attachPatternMatched(this._onDetailRouteHit.bind(this));
    },

    _onDetailRouteHit: function(oEvent) {
      var array2 = this.getView().getModel("myData").getProperty("/myDataSet");
      this._Test();
    },

    _Test: function() {
      var array3 = this.getView().getModel("myData").getProperty("/myDataSet");
    }
  });
});

Answer 1

this.getView().getModel("myData") returns undefined in onInit is because the view isn't associated with the parent at that moment. Take a look at this graphic from the documentation. It says:

Init function of controller is executed --> Router places views in root control: models are now available within the view and its controller.

If you want to access the model in onInit from higher hierarchy (e.g. Component model), you need to get the reference of that model owner explicitly and then call getModel from it: this.getOwnerComponent().getModel("myData")

→ More about model propagation

Answer 2

check out this post. It explains this.

So basically it can have a different meaning based on you object and scope.

Now on to the 3 functions.

• in the onInit, your view has not been instantiated yet, so this.getView() returns null

in your second met the view has been instantiated and this is a direct link to your controller. Hence it get a return object which is your view because your controller can access it's view.

Your last case surprises me because i would have expected that function to be able to get to the view. If it doesn't should compare the "this" object in the debugger and see what it's reference is.