Skip to Content
avatar image
Former Member

Binding event name from JSON Model ?

Hi Exports,

I want to bind event name from JSON Model,

Let take a look at this example:

view.xml file

-------------------------

xmlns:tnt="sap.tnt"

...................................

<tnt:NavigationList id="navigationList" items="{/dataSet}">

<tnt:items>

<tnt:NavigationListItem text="{text}" select="{select}" />

</tnt:items>

</tnt:NavigationList>

--------------------------

controller.js file

--------------------------

var jsonModel = new sap.ui.model.json.JSONModel({

"dataSet":[

{text:"Project",

"select":"handleProjectSelect"}

]});

var oList = this.getView().byId("navigationList");

oList.setModel(jsonModel) ;

Here the problem which am facing is, handleProjectSelect event name is not triggering on click of respective navigationlist item.

Thanks,

Fathima

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Dec 29, 2017 at 11:08 AM

    Hi Fathima,

    Try like this

    "dataSet":[
    {text:"Project",
    "select": this.handleProjectSelect}
    ]});
    
    Add comment
    10|10000 characters needed characters exceeded

  • Dec 29, 2017 at 12:03 PM

    Hi,

    The following code will work (I tested it on Web IDE).

    View

    <mvc:View controllerName="eventFromJson.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
    	displayBlock="true" xmlns:tnt="sap.tnt" xmlns="sap.m">
    <App>
     <pages>
      <Page title="JSON evnets">
       <content>
        <tnt:NavigationList id="navigationList" items="{/dataSet}">
         <tnt:items>
          <tnt:NavigationListItem text="{text}"/>
         </tnt:items>
        </tnt:NavigationList>
       </content>
      </Page>
     </pages>
    </App>
    </mvc:View>
    
    

    Controller

    sap.ui.define([
    	"sap/ui/core/mvc/Controller",
    	"sap/m/MessageToast",
    	"sap/ui/model/json/JSONModel"
    ], function(Controller, MessageToast) {
    	"use strict";
    
    
    	return Controller.extend("eventFromJson.controller.View1", {
    		handleProjectSelect: function() {
    			MessageToast.show("handleProjectSelect");
    		},
    		onInit: function() {
    			var jsonModel = new sap.ui.model.json.JSONModel({
    				"dataSet": [{
    					"text": "Project",
    					"select": "handleProjectSelect"
    				}]
    			});
    			var oList = this.getView().byId("navigationList");
    			oList.setModel(jsonModel);
    			var items = oList.getItems();
    			items[0].attachSelect(this[jsonModel.getData().dataSet[0].select]);
    		}
    	});
    });
    
    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Dec 29, 2017 at 05:16 PM

    Hi Noor

    here is an example. http://jsbin.com/lutocan/1/edit?html,js,output

    IMO, you should have the event to call a function in your controller and let the controller does the job of finding the function in the model.

    -D

    Add comment
    10|10000 characters needed characters exceeded