CODEWITHSUNDEEP
javascriptmodel-bindingsapui5
B. Kemmer
B. Kemmer

Reputation: 1537

Bind an Event via a JSON Model

I wonder if it is possible to bind an Event via a JSONModel.

If I do so, it will always throw this Exception:

Uncaught TypeError: I.fFunction.call is not a function

This is my code:

_ViewReference: undefined,
_oMenuItemsConfigModel: undefined,
createMenu: function(oItem){
    if (!this._menu) {
        this._menu = new sap.ui.unified.Menu(this._oMenuConfig);
        this._menu.setModel(this._oMenuItemsConfigModel);

        this._menu.bindAggregation("items", "/", new sap.ui.unified.MenuItem({
            text: "{text}",
            icon: "{icon}",
            select: "{select}",
            enabled: "{enabled}"
        }));

        this._ViewReference.addDependent(this._menu);
    }

    var eDock = sap.ui.core.Popup.Dock;
    this._menu.open(false, oItem, eDock.BeginTop, eDock.BeginBottom, oItem);
    return oItem;
}

I have a Universal ContextMenu which just needs some config in order to get created. This is how I call this function from my Controller:

var oContextMenu = new ContextMenu(this.getView(), 
    new sap.ui.model.json.JSONModel(
        [
            {
                text: "Copy",
                select: [this.onContextMenuItemCopySelected, this]
            },
            {
                text: "Paste",
                select: [this.onContextMenuItemPasteSelected, this]
            }
        ]
    )
);

Here is a JSBin Example.

Upvotes: 1

Views: 779

Answers (1)

schnoedel
schnoedel

Reputation: 3948

You cannot use databinding for events. But you can implement an universal event handler for your menuitems that will call the appropriate function.

Bind the menu items select event to a common event handler:

this._menu.bindAggregation("items", "/", new sap.ui.unified.MenuItem({
                text: "{text}",
                select: [this.onSelect, this]
            }));

And implement the handler like this: 

onSelect:function(oEvent){
          var item = oEvent.getParameter("item");
          var context = item.getBindingContext();
          var fnConfig = context.getProperty("select");
          fnConfig[0].bind(fnConfig[1])();

       }

fnConfig is the Array of function an this-object from the model. Using Function.bind() lets you call the function on the given this object.

Here it is on JSBin

Upvotes: 1

Related Questions