forked from aemsite/ampdemo
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathamp-binding-limit-exceeds-issue.html
133 lines (128 loc) · 5.45 KB
/
amp-binding-limit-exceeds-issue.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
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
126
127
128
129
130
131
132
133
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- ## Setup -->
<!-- Additionally used AMP components must be imported in the header. We use `amp-list` for showing a list of albums -->
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<!-- We use `amp-bind` for dynamically changing the src of `amp-list` -->
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<!-- We use `amp-mustache` for rendering the `amp-list` content -->
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<link rel="canonical" href="https://ampbyexample.com/advanced/load_more_button/">
<title>AMP 2000 bindings</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
.btn {
background-color: red;
padding: 10px;
color: white;
}
.hide {
display: none;
}
.text-selected {
color: red;
}
p {
cursor: pointer;
}
.blue {
color: blue;
}
.pink {
color: pink;
}
</style>
</head>
<body>
<amp-list
src="https://jsonplaceholder.typicode.com/albums"
layout="fixed-height"
width="auto"
height="500px"
items="."
>
<template type="amp-mustache">
<p role="button" [class]="albumState.albumId == {{id}} ? 'text-selected' : ''" on="tap: AMP.setState({
albumState: {
albumId: {{id}}
}
}), photo-list.show">
<strong>Album Id</strong>: {{id}}
<strong>Album Title</strong>: {{title}}
</p>
</template>
</amp-list>
<hr>
<amp-list
id="photo-list"
src="'https://jsonplaceholder.typicode.com/photos'"
[src]="'https://jsonplaceholder.typicode.com/photos?albumId=' + albumState.albumId"
layout="fixed-height"
width="auto"
height="500px"
items="."
hidden
>
<template type="amp-mustache">
<p role="button"
on="tap: AMP.setState({
{{title}}: '{{thumbnailUrl}}'
})">
<p>AlbumID: {{id}}</p>
<p>Photos Title: {{title}}</p>
<p [class]="'{{url}}'.indexOf('600') > -1 ? 'blue' : 'pink'">URL: {{url}}</p>
<p [class]="'{{thumbnailUrl}}'.indexOf('150') > -1 ? 'pink' : 'blue'">Thumbnail URL: '{{thumbnailUrl}}'</p>
<p>AlbumID: {{id}}</p>
<p>Photos Title: {{title}}</p>
<p [class]="'{{url}}'.indexOf('600') > -1 ? 'blue' : 'pink'">URL: {{url}}</p>
<p [class]="'{{thumbnailUrl}}'.indexOf('150') > -1 ? 'pink' : 'blue'">Thumbnail URL: '{{thumbnailUrl}}'</p>
<p>AlbumID: {{id}}</p>
<p>Photos Title: {{title}}</p>
<p [class]="'{{url}}'.indexOf('600') > -1 ? 'blue' : 'pink'">URL: {{url}}</p>
<p [class]="'{{thumbnailUrl}}'.indexOf('150') > -1 ? 'pink' : 'blue'">Thumbnail URL: '{{thumbnailUrl}}'</p>
<p>AlbumID: {{id}}</p>
<p>Photos Title: {{title}}</p>
<p [class]="'{{url}}'.indexOf('600') > -1 ? 'blue' : 'pink'">URL: {{url}}</p>
<p [class]="'{{thumbnailUrl}}'.indexOf('150') > -1 ? 'pink' : 'blue'">Thumbnail URL: '{{thumbnailUrl}}'</p>
<p>AlbumID: {{id}}</p>
<p>Photos Title: {{title}}</p>
<p [class]="'{{url}}'.indexOf('600') > -1 ? 'blue' : 'pink'">URL: {{url}}</p>
<p [class]="'{{thumbnailUrl}}'.indexOf('150') > -1 ? 'pink' : 'blue'">Thumbnail URL: '{{thumbnailUrl}}'</p>
<!--
Simple Copy, No error if direct render.
<p>AlbumID: {{id}}</p>
<p>Photos Title: {{title}}</p>
<p class="blue">URL: {{url}}</p>
<p class="pink">Thumbnail URL: '{{thumbnailUrl}}'</p>
<p>AlbumID: {{id}}</p>
<p>Photos Title: {{title}}</p>
<p class="blue">URL: {{url}}</p>
<p class="pink">Thumbnail URL: '{{thumbnailUrl}}'</p>
<p>AlbumID: {{id}}</p>
<p>Photos Title: {{title}}</p>
<p class="blue">URL: {{url}}</p>
<p class="pink">Thumbnail URL: '{{thumbnailUrl}}'</p>
<p>AlbumID: {{id}}</p>
<p>Photos Title: {{title}}</p>
<p class="blue">URL: {{url}}</p>
<p class="pink">Thumbnail URL: '{{thumbnailUrl}}'</p>
<p>AlbumID: {{id}}</p>
<p>Photos Title: {{title}}</p>
<p class="blue">URL: {{url}}</p>
<p class="pink">Thumbnail URL: '{{thumbnailUrl}}'</p>-->
</p>
</template>
</amp-list>
<amp-state id="albumState">
<script type="application/json">
{
albumId: '0'
}
</script>
</amp-state>
</body>
</html>