Search code examples
javascriptbindingsapui5

SAPUI5: Cannot read property 'call' of undefined on elementBinding

I'm trying to do some operations after a successful data binding of the view. The best idea would be in my opinion to do it in the callback of the attachModelContextChange method. After defining which method would be the callback and attaching the event listener to the view, when I try to bind data to my view, I get the error: Cannot read property 'call' of undefined. I'm pasting my controllers code fragments below and the stack trace.

    onInit: function() {
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.attachRouteMatched(this.routeMatched, this);
    },


    routeMatched: function(oEvent) {
        var sEntityPath,
            oParameters = oEvent.getParameters();

        this.routeName = oParameters.name;

        this.getView().detachModelContextChange(
            this.modelCallback('edit'),
            this.getView()
        );

        if (oParameters.name === "EditItem") {
            if (!isNaN(oParameters.arguments.id)) {
                this.getView().attachModelContextChange(null,
                    this.modelCallback('edit'),
                    this.getView()
                );
                sEntityPath = "/ItemData(" + oParameters.arguments.id + ")";
                this.getView().bindElement(sEntityPath);
            } else {
                var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
                oRouter.navTo("CreateItem", {
                    from: "EditItem"
                }, false);
            }
        }
    },

    modelCallback: function(type) {
        console.log(type);
    }

The console.log from the modelCallback method is launching properly. Removing the line with

this.getView().bindElement(sEntityPath);

prevents the error from triggering (but this way I'm of course not getting any data in my view).

Any ideas what am I missing?

Below I'm pasting the stack trace:

datajs.js:17 Uncaught TypeError: Cannot read property 'call' of undefined
at f.a.fireEvent (sap-ui-core.js:449)
at f.a.fireEvent (sap-ui-core.js:991)
at f.fireModelContextChange (sap-ui-core.js:573)
at f.h.setElementBindingContext (sap-ui-core.js:524)
at constructor.i (sap-ui-core.js:500)
at constructor.a.fireEvent (sap-ui-core.js:449)
at constructor.B._fireChange (sap-ui-core.js:1302)
at eval (library-preload.js:2375)
at u (library-preload.js:2460)
at d.r._processSuccess (library-preload.js:2492)
Solution

  • You have incorrect parameters in attachModelContextChange call. The only required parameter is a callback function, modelCallback in your case. You pass null as oData optional parameter which can be omitted. The correct call should look like this:

           this.getView().attachModelContextChange(
            this.modelCallback, // the function, not the result of its call!
            this // Instance of controller (not View!), which is now *this*
        );

    Also, the call of detachModelContextChange should be with the same parameters to make it work:

    this.getView().detachModelContextChange(
  this.modelCallback, // the function, not the result of its call!
  this // Instance of controller (not View!), which is now *this*
);
    when you place this.modelCallback('edit') at the parameter list then first the function is executed and then its result is passed as a parameter to attachModelContextChange (or detachModelContextChange)