ikiw · July 22, 2015 13:46
diff --git a/listnavigation.js b/listnavigation.js
 <!DOCTYPE HTML>
 <html>
 	<head>
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
 		
 		<title>Mobile App with data-bound List</title>
 		
 		<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
 				id="sap-ui-bootstrap"
 				data-sap-ui-libs="sap.m,sap.ui.layout" 
 				data-sap-ui-xx-bindingSyntax="complex"
 				data-sap-ui-theme="sap_bluecrystal"></script>
 		<!-- load the mobile lib "sap.m", the layout lib and the "sap_bluecrystal" theme -->
 		
 		
 		<script type="text/javascript">
 			
 			// create the data
 			
 			// create some dummy JSON data
 			var data = {
 				names: [
 					{firstName: "Julia", lastName: "GEFFE"},
 					{firstName: "Theo", lastName: "GEFFE"},
 					{firstName: "Mathias", lastName: "GEFFE"},
 					{firstName: "Sarah", lastName: "GEFFE"}
 				],
 				ages: [
 					{age:"11", firstName: "Julia"},{age:"9", firstName: "Theo"},{age:"5", firstName: "Mathias"},{age:"3", firstName: "Sarah"}]
 			};
 			
 			// create a Model with this data
 			var model = new sap.ui.model.json.JSONModel();
 			model.setData(data);
 			
 			
 			// create the UI
 			
 			// create a List control
 			var list = new sap.m.List({
 				headerText:"Names"
 			});
 			

 			// create a List control
 			var list2 = new sap.m.List({
 				headerText:"Names"
 			});
 			
 			list2.bindItems({
 				path : "/ages",
 				sorter : new sap.ui.model.Sorter("age"),
 				template : new sap.m.StandardListItem({
 					title: "{firstName}",
 					description: "{age}",
 					type: sap.m.ListType.Navigation,
 					press:function(evt){
 						var oBindingContext = evt.getSource().getBindingContext(); // evt.getSource() is the ListItem
 						page2.setBindingContext(oBindingContext); // make sure the detail page has the correct data context
 						app.to("page2");
 					}
 				})				
 			});
 			
 			// bind the List items to the data collection
 			list.bindItems({
 				path : "/names", 
 				sorter : new sap.ui.model.Sorter("firstName"),
 				template : new sap.m.StandardListItem({
 					title: "{lastName}",
 					description: "{firstName}",
 					type: sap.m.ListType.Navigation,
 					press:function(evt){
 						var oBindingContext = evt.getSource().getBindingContext(); // evt.getSource() is the ListItem
 						page3.setBindingContext(oBindingContext); // make sure the detail page has the correct data context
 						app.to("page3");
 					}
 				})
 			});
 			
 			// create the page holding the List
 			var page1 = new sap.m.Page({
 				title: "List Page",
 				content : list
 			});
          
 			
 			// create the detail page
 			var page2 = new sap.m.Page("page2", {
 				title: "Detail Page",
 				showNavButton: true,
 				navButtonPress: function(){
 					app.back();
 				},
 				content : [
 					new sap.ui.layout.form.SimpleForm({ 
 						title: "Details for {firstName} {lastName}",
 						content: [
 							new sap.m.Label({text: "First Name"}),
 							new sap.m.Text({text: "{firstName}"}),
 							new sap.m.Label({text: "Last Name"}),
 							new sap.m.Text({text: "{lastName}"})
 						]
 					})
 				]
 			});
 			
 			// create the page holding the List
 			var page3 = new sap.m.Page("page3", {
 				title: "Paul's List",
 				showNavButton: true,
 				navButtonPress: function(){
 					app.back();
 				},
 				content : list2

 			});
 			
 			// create a mobile App holding the pages and place the App into the HTML document
 			var app = new sap.m.App({
 				pages: [page1, page2, page3]
 			}).placeAt("content");
 			
 			// set the model to the App; it will be propagated to the children
 			app.setModel(model);
 			
 		</script>
 		
 	</head>
 	<body id="content" class="sapUiBody">
 	</body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

	<title>Mobile App with data-bound List</title>

	<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
	id="sap-ui-bootstrap"
	data-sap-ui-libs="sap.m,sap.ui.layout"
	data-sap-ui-xx-bindingSyntax="complex"
	data-sap-ui-theme="sap_bluecrystal"></script>
	<!-- load the mobile lib "sap.m", the layout lib and the "sap_bluecrystal" theme -->


	<script type="text/javascript">

	// create the data

	// create some dummy JSON data
	var data = {
	names: [
	{firstName: "Julia", lastName: "GEFFE"},
	{firstName: "Theo", lastName: "GEFFE"},
	{firstName: "Mathias", lastName: "GEFFE"},
	{firstName: "Sarah", lastName: "GEFFE"}
	],
	ages: [
	{age:"11", firstName: "Julia"},{age:"9", firstName: "Theo"},{age:"5", firstName: "Mathias"},{age:"3", firstName: "Sarah"}]
	};

	// create a Model with this data
	var model = new sap.ui.model.json.JSONModel();
	model.setData(data);


	// create the UI

	// create a List control
	var list = new sap.m.List({
	headerText:"Names"
	});


	// create a List control
	var list2 = new sap.m.List({
	headerText:"Names"
	});

	list2.bindItems({
	path : "/ages",
	sorter : new sap.ui.model.Sorter("age"),
	template : new sap.m.StandardListItem({
	title: "{firstName}",
	description: "{age}",
	type: sap.m.ListType.Navigation,
	press:function(evt){
	var oBindingContext = evt.getSource().getBindingContext(); // evt.getSource() is the ListItem
	page2.setBindingContext(oBindingContext); // make sure the detail page has the correct data context
	app.to("page2");
	}
	})
	});

	// bind the List items to the data collection
	list.bindItems({
	path : "/names",
	sorter : new sap.ui.model.Sorter("firstName"),
	template : new sap.m.StandardListItem({
	title: "{lastName}",
	description: "{firstName}",
	type: sap.m.ListType.Navigation,
	press:function(evt){
	var oBindingContext = evt.getSource().getBindingContext(); // evt.getSource() is the ListItem
	page3.setBindingContext(oBindingContext); // make sure the detail page has the correct data context
	app.to("page3");
	}
	})
	});

	// create the page holding the List
	var page1 = new sap.m.Page({
	title: "List Page",
	content : list
	});


	// create the detail page
	var page2 = new sap.m.Page("page2", {
	title: "Detail Page",
	showNavButton: true,
	navButtonPress: function(){
	app.back();
	},
	content : [
	new sap.ui.layout.form.SimpleForm({
	title: "Details for {firstName} {lastName}",
	content: [
	new sap.m.Label({text: "First Name"}),
	new sap.m.Text({text: "{firstName}"}),
	new sap.m.Label({text: "Last Name"}),
	new sap.m.Text({text: "{lastName}"})
	]
	})
	]
	});

	// create the page holding the List
	var page3 = new sap.m.Page("page3", {
	title: "Paul's List",
	showNavButton: true,
	navButtonPress: function(){
	app.back();
	},
	content : list2

	});

	// create a mobile App holding the pages and place the App into the HTML document
	var app = new sap.m.App({
	pages: [page1, page2, page3]
	}).placeAt("content");

	// set the model to the App; it will be propagated to the children
	app.setModel(model);

	</script>

	</head>
	<body id="content" class="sapUiBody">
	</body>
	</html>