-
Notifications
You must be signed in to change notification settings - Fork 0
/
step10.html
66 lines (55 loc) · 1.58 KB
/
step10.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>HTML Templating</title>
<script id='sap-ui-bootstrap'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'></script>
<script>
jQuery(function() {
var oModel = new sap.ui.model.json.JSONModel();
var data = {
name: "Members",
members: [
{first:"Phil", last:"Lynt"},
{first:"Scot", last:"Gorm"},
{first:"Brian", last:"Robert"},
{first:"Brian", last:"Down"}
]
}
oModel.setData(data);
sap.ui.getCore().setModel(oModel);
//scan for templates and carry them out
sap.ui.template();
})
</script>
</head>
<body class='sapUiBody'>
<h2>This is a simple template which uses Handlebars and UI5's model</h2>
<div id="simpleTemplate" data-type="text/x-handlebars-template">
<div>{{text path="/name"}}:</div>
<ul>
{{#each path="/members"}}
<li>
{{text path="first"}}
{{text path="last"}}
</li>
{{/each}}
</ul>
</div>
<h2>This is a template using UI5 controls on top</h2>
<div id="controlsTemplate" data-type="text/x-handlebars-template">
<div>{{text path="/name"}}</div>
<ul>
{{#each path="/members"}}
<li>
{{control sap-ui-type="sap.m.Text" text="{first}"}}
{{control sap-ui-type="sap.m.Text" text="{last}"}}
</li>
{{/each}}
</ul>
Change an entry in the fields to see the live binding!
</div>
</body>
</html>