-
Notifications
You must be signed in to change notification settings - Fork 26
Expand file tree
/
Copy pathtemplate-files-hbs.htm
More file actions
125 lines (111 loc) · 5.75 KB
/
template-files-hbs.htm
File metadata and controls
125 lines (111 loc) · 5.75 KB
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body { padding:20px 40px; }
nav { padding:1em; }
nav a { padding:10px; }
nav a.active { color:white; background-color:darkblue; }
.align-right { text-align:right; }
p { padding: 1em; }
table { border-collapse:collapse; margin-top:40px; }
thead { background-color:darkgreen; color:white; }
th, td { padding:0.5em 1em; border:1px solid darkgreen; }
tr:nth-child(even) { background-color: lightgreen; }
.error { padding:1em; color:white; background-color:red; }
</style>
</head>
<body>
<nav>
<a href="#/">Home</a>
<a href="#/page1">Page 1</a>
<a href="#/page2">Page 2</a>
<a href="#/json-data/US">Json Data</a>
</nav>
<div id="view"></div>
<script type="text/x-template" data-engine="handlebars" id="counter-page">
<p data-change-border><strong>Page Loaded Counter:</strong> {{counter}}</p>
<p class="change-border"><strong>Page Last Refreshed:</strong> {{formatTime (now)}}</p>
<p class="change-border"><strong>Page Name:</strong> {{ pageName }}</p>
</script>
<template data-route="/">
<p data-change-border>This page shows how the template files work. Use DevTools to see info on this console.</p>
<p class="change-border">Type [app.activeModel] in dev tools to see the model for the active page, and type [app] to see the full API.</p>
</template>
<!-- templates/page-object.js -->
<!--
Model properties can be optionally defined from HTML as shown
with the custom attribute [data-page-name] which becomes [pageName].
-->
<script type="text/x-template" data-engine="handlebars" data-route="/page1" data-page="pageName" data-page-name="Page1">
<div data-template-id="counter-page"></div>
</script>
<script type="text/x-template" data-engine="handlebars" data-route="/page2" data-page="pageName" data-page-name="Page2">
<div data-template-id="counter-page"></div>
</script>
<!-- templates/page-from-jsonData.js -->
<!--
Adding the attribute [data-load-only-once]
will cause the data to only load the first time the view is loaded
(or when the parameters change).
-->
<script
type="text/x-template"
data-engine="handlebars"
data-route="/json-data/:country"
data-page="customPage"
data-url="https://www.dataformsjs.com/data/geonames/regions/:country">
{{#if isLoading}}<h3>Loading...</h3>{{/if}}
{{#if hasError}}<h3 class="error">{{errorMessage}}</h3>{{/if}}
{{#if isLoaded}}
<table>
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Population</th>
<th>Timezone</th>
<th>Date Last Modified</th>
</tr>
</thead>
<tbody>
{{#each regions}}
<tr>
<td>{{admin1_code}}</td>
<td>{{name}}</td>
<td class="align-right">{{formatNumber population}}</td>
<td>{{timezone}}</td>
<td class="align-right">{{formatDate modification_date}}</td>
</tr>
{{/each}}
</tbody>
</table>
{{/if}}
</script>
<!-- Handlebars and Helper -->
<script src="https://cdn.jsdelivr.net/npm/handlebars@4.7.6/dist/handlebars.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/extensions/handlebars-helpers.min.js"></script>
<!-- DataFormsJS Standard Files -->
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/DataFormsJS.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/plugins/navLinks.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/pages/jsonData.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/pages/classes/JsonData.js"></script>
<!-- DataFormsJS Template Files -->
<!-- Plugin Function -->
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/plugin-function.js"></script>
<!-- Pick one - ES5 or ES6 -->
<!-- ES5 Style Objects -->
<!-- <script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/page-object.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/page-from-jsonData.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/plugin-object.js"></script> -->
<!-- ES6 Class Templates -->
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/page-class.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/page-from-JsonData-class.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/templates/plugin-class.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/web-components/old-browser-warning.min.js"></script>
<!-- For an example of [page-from-entryForm.js] search the source code -->
</body>
</html>