<!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_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{ "databindingdemo": "./" }'
>
</script>
<script>
sap.ui.getCore().attachInit(function () {
new sap.ui.core.mvc.XMLView({ viewName : "databindingdemo.view.App" })
.placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
controllerName="databindingdemo.controller.App">
<Panel headerText="Data Binding Demo">
<Label text="Input Field with Two Way Data Binding" class="sapUiSmallMargin"/>
<Input value="{/Name}" valueLiveUpdate="true" width="200px" />
</Panel>
<Panel >
<Text text="Hello {/Name}" class="sapUiSmallMargin"/>
</Panel>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("databindingdemo.controller.App", {
onInit: function() {
//JSON Sample Data
var jsonData = {
Name: "Harry Potter"
};
// Create a JSON model from an object literal
var oModel = new sap.ui.model.json.JSONModel(jsonData);
this.getView().setModel(oModel);
}
});
});