I'm making a little program for a school assignment, but I encounter a problem. I need to make a program in SAPUI5 that loads JSON data in a table. On each row there is a function (onItemSelected) attached. So when I press on a row, I need to get the Id of the weekday. This is how the program looks like now.
When I press on a row now, it says that my getBindingContext() is undefined. As you can see here.
I paste my code here, so that you guys can see what I'm doing wrong.
Thanks alot!
This is my Index.html
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta charset="UTF-8"> <title>SAPUI5 Data Binding Tutorial</title> <script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-resourceroots='{ "sap.ui.demo.db": "./" }' > </script> <script> sap.ui.getCore().attachInit(function(){ var oWeekdagModel = new sap.ui.model.json.JSONModel(); oWeekdagModel.loadData("./model/weekdagen.json"); sap.ui.getCore().setModel(oWeekdagModel, "week"); }) var oResourceModel = new sap.ui.model.resource.ResourceModel({ bundleName : "sap.ui.demo.db.i18n.i18n" }); sap.ui.getCore().setModel(oResourceModel, "i18n"); new sap.ui.core.mvc.XMLView({viewName: "sap.ui.demo.db.view.App"}) .placeAt("content"); </script> </head> <body class="sapUiBody" id="content"> </body> </html> This is my App.view.xml:
<mvc:View xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="sap.ui.demo.db.controller.App"> <Table id="idWeekdagenTable" inset="false" items="{week>/weekdays}"> <headerToolbar> <Toolbar> <Title text="Weekdagen" level="H2"/> </Toolbar> </headerToolbar> <columns> <Column width="20%"> <Text text="Id" /> </Column> <Column width="20%"> <Text text="Weekdag" /> </Column> <Column width="20%"> <Text text="Aantal gewoon eten" /> </Column> </columns> <items> <ColumnListItem press=".onItemSelected" type="Active"> <Text id="id" text="{week>id}" /> <Text id="day" text="{week>day}" /> <Text text="{week>no_meals}" /> </ColumnListItem> </items> </Table> <Table id="idMaaltijdenTable" inset="false" items="{maaltijd>/meals}"> <headerToolbar> <Toolbar> <Title text="Maaltijden" level="H2"/> </Toolbar> </headerToolbar> <columns> <Column width = "20%"> <Text text="Maaltijd"/> </Column> <Column width="20%"> <Text text="Descriptie"/> </Column> </columns> <items> <ColumnListItem press=".onItemSelected" type="Active"> <Text text="{maaltijd>MealNo}" /> <Text text="{maaltijd>items}" /> </ColumnListItem> </items> </Table> </mvc:View> This is my controller (App.controller.js):
sap.ui.define(["sap/ui/core/mvc/Controller"], function(controller){ "use strict"; return controller.extend("sap.ui.demo.db.controller.App", { onItemSelected: function(oEvent) { var oItem, oCtx; oItem = oEvent.getSource(); oCtx = oItem.getBindingContext(); alert(oCtx); //alert(oCtx.getProperty("id")); }, onInit: function() { var oWeekdagModel = new sap.ui.model.json.JSONModel(); oWeekdagModel.loadData("weekdagen.json"); //binding op view sap.ui.getCore().setModel(oWeekdagModel); } }); }); This is my JSON file:
{ "weekdays": [ { "day": "Monday", "no_meals": "2", "id": "1" }, { "day": "Tuesday", "no_meals": "3", "id": "2" }, { "day": "Wednesday", "no_meals": "2", "id": "3" }, { "day": "Thursday", "no_meals": "2", "id": "4" }, { "day": "Friday", "no_meals": "2", "id": "5" } ], "meals": [ { "MealNo": "1", "dayId": "1", "items": "Burger with french fries" }, { "MealNo": "2", "dayId": "1", "items": "French fries with Burger" }, { "MealNo": "3", "dayId": "2", "items": "French fries" }, { "MealNo": "4", "dayId": "2", "items": "Burger" }, { "MealNo": "5", "dayId": "2", "items": "Burger with french fries" }, { "MealNo": "6", "dayId": "3", "items": "Burger with french fries" }, { "MealNo": "7", "dayId": "3", "items": "French fries with Burger" }, { "MealNo": "8", "dayId": "4", "items": "Burger" }, { "MealNo": "9", "dayId": "4", "items": "Fruit salad" }, { "MealNo": "10", "dayId": "5", "items": "Vegetables" }, { "MealNo": "11", "dayId": "5", "items": "Burger" } ] }
No comments:
Post a Comment