ikiw/listnavigation.js

## 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>