Skip to Content
0

Binding event name from JSON Model ?

Dec 29, 2017 at 04:23 AM

67

avatar image
Former Member

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

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Irfan Gokak Dec 29, 2017 at 11:08 AM
0

Hi Fathima,

Try like this

"dataSet":[
{text:"Project",
"select": this.handleProjectSelect}
]});
Share
10 |10000 characters needed characters left characters exceeded
Iftah Peretz
Dec 29, 2017 at 12:03 PM
0

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]);
		}
	});
});
Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member
Dec 29, 2017 at 05:16 PM
0

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

Share
10 |10000 characters needed characters left characters exceeded