Skip to content

Commit

Permalink
Use binding=refresh|no in amp-list wherever possible (ampproject#2206)
Browse files Browse the repository at this point in the history 
* Use binding=no|refresh wherever possible.

* Explain binding="no" on first use.

* Explain binding="no" on first use.
  • Loading branch information
@sebastianbenz
William Chou authored and sebastianbenz committed Jun 3, 2019
1 parent 93d5414 commit 48328f7
Show file tree
Hide file tree
Showing 31 changed files with 161 additions and 121 deletions.
15 changes: 8 additions & 7 deletions boilerplate/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@
<header class="ap--header ap--header-fixed">
<div class="ap-o-header">
<a class="ap-o-header-home" href="/boilerplate">
<svg class="ap-o-header-home-logo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg>
<svg class="ap-o-header-home-logo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg>
<span class="ap-o-header-home-title">AMP</span> <span class="ap-o-header-home-sub-title">Boilerplate Generator</span>
</a>
<a class="ap-m-homepage-link" href="/">amp.dev
Expand Down Expand Up @@ -155,7 +155,7 @@ <h3>Select Format</h3>
</button>
<div class="ap-m-format-toggle-formats">
{{#formats}}
<a class="ap-m-format-toggle-link ap-m-format-toggle-link-{{id}} {{^default}}inactive{{/default}} {{#default}}active{{/default}}"
<a class="ap-m-format-toggle-link ap-m-format-toggle-link-{{id}} {{^default}}inactive{{/default}} {{#default}}active{{/default}}"
[class]="'ap-m-format-toggle-link ap-m-format-toggle-link-{{id}} ' + (config.format == '{{id}}' ? 'active' : 'inactive')"
on="tap:AMP.setState({
config: {
Expand Down Expand Up @@ -267,9 +267,10 @@ <h3>Boilerplate</h3>
layout="fixed-height"
[src]="config"
single-item
binding="always"
[is-layout-container]="config.changed"
hidden [hidden]="!config.changed">
items="config"
hidden [hidden]="!config.changed"
binding="refresh"
[is-layout-container]="config.changed">
<template type="amp-mustache">
{{#formats}}
<div class="ap-m-code-snippet"><pre hidden [hidden]="config.format != '{{id}}'"><code>{{{template}}}</code></pre></div>
Expand All @@ -294,8 +295,8 @@ <h3>Bookend Sample</h3>
</amp-list>
</section>
</main>
<div id="scrollToBoilerplate"
tabindex="0"
<div id="scrollToBoilerplate"
tabindex="0"
role="button"
on="tap:boilerplate.scrollTo(duration=200)"
class="fab">View Code</div>
Expand Down
3 changes: 2 additions & 1 deletion examples/source/1.components/amp-bind.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,8 @@
<amp-list layout="fixed-height"
height="0"
[height]="18 * myRemoteState.items.length"
[src]="myRemoteState.items">
[src]="myRemoteState.items"
binding="no">
<template type="amp-mustache">
<div><a href="{{url}}">{{title}}</a></div>
</template>
Expand Down
26 changes: 17 additions & 9 deletions examples/source/1.components/amp-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,10 +119,11 @@
]
}
```
The list content is rendered via an [amp-mustache template]({{g.doc('/content/amp-dev/documentation/components/reference/amp-mustache.md', locale=doc.locale).url.path}}). The template can be specified either by id, or by using a nested element.
The list content is rendered via an [amp-mustache template]({{g.doc('/content/amp-dev/documentation/components/reference/amp-mustache.md', locale=doc.locale).url.path}}). The template can be specified either by id, or by using a nested element. For performance reasons, we're adding `binding="no"` as we're not using `amp-bind`.
-->
<amp-list layout="fixed-height" height="100"
src="/static/samples/json/examples.json">
src="/static/samples/json/examples.json"
binding="no">
<template type="amp-mustache">
<div><a href="{{url}}">{{title}}</a></div>
</template>
Expand All @@ -138,7 +139,8 @@
</template>
<amp-list layout="fixed-height" height="100"
src="/static/samples/json/examples.json"
template="amp-template-id">
template="amp-template-id"
binding="no">
</amp-list>
</div>

Expand All @@ -147,7 +149,8 @@
If the `amp-list` content requires more space than available, the AMP runtime will display the overflow element (if specified).
-->
<amp-list layout="fixed-height" height="48"
src="/static/samples/json/examples.json">
src="/static/samples/json/examples.json"
binding="no">
<div overflow role="button" aria-label="Show more" class="list-overflow">
Show more
</div>
Expand All @@ -163,7 +166,8 @@
<div>
<amp-list layout="fixed-height" height="100"
src="/static/samples/json/examples.json"
[src]="srcUrl" >
[src]="srcUrl"
binding="no">
<template type="amp-mustache">
<div><a href="{{url}}">{{title}}</a></div>
</template>
Expand All @@ -187,7 +191,8 @@
[src]="items"
[height]="items.length * 24"
single-item
items=".">
items="."
binding="no">
<template type="amp-mustache">
<div>{{ . }}</div>
</template>
Expand All @@ -206,7 +211,8 @@
[src]="emptyListSampleSrc || '/static/samples/json/examples-empty.json'"
single-item
items="."
reset-on-refresh>
reset-on-refresh
binding="no">
<template type="amp-mustache">
{{#items}}
<div><a href="{{url}}">{{title}}</a></div>
Expand All @@ -231,7 +237,8 @@
reset-on-refresh
layout="fixed-height"
height="654"
src="<% hosts.backend %>/samples_templates/slow-json-with-items/?delay=10000">
src="<% hosts.backend %>/samples_templates/slow-json-with-items/?delay=10000"
binding="no">
<div placeholder>
<div class="product"></div>
<div class="product"></div>
Expand Down Expand Up @@ -265,7 +272,8 @@
reset-on-refresh
layout="fixed-height"
height="600"
src="<% hosts.backend %>/samples_templates/slow-json-with-items/?delay=1000">
src="<% hosts.backend %>/samples_templates/slow-json-with-items/?delay=1000"
binding="no">
<template type="amp-mustache">
<div class="product">
<amp-img width="150"
Expand Down
8 changes: 4 additions & 4 deletions examples/source/1.components/amp-mustache.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
<!--
Variables are interpolated when the variable name is surrounded in double curly brackets (`{{varname}}`)
-->
<amp-list src="/static/samples/json/cart.json" layout="fixed-height" height="56">
<amp-list src="/static/samples/json/cart.json" layout="fixed-height" height="56" binding="no">
<template type="amp-mustache">
Hi {{fullname}}!
</template>
Expand All @@ -81,7 +81,7 @@
<!--
Conditionals are called using the same syntax, but with an octothorpe (`#`) prepended.
-->
<amp-list src="/static/samples/json/cart.json" layout="fixed-height" height="56">
<amp-list src="/static/samples/json/cart.json" layout="fixed-height" height="56" binding="no">
<template type="amp-mustache">
{{#phonenumber}}
The registered phone number is {{phonenumber}}
Expand All @@ -93,7 +93,7 @@
<!--
For negative conditionals instead, insert a caret (`^`) before the variable name.
-->
<amp-list src="/static/samples/json/cart.json" layout="fixed-height" height="56">
<amp-list src="/static/samples/json/cart.json" layout="fixed-height" height="56" binding="no">
<template type="amp-mustache">
{{^twitter}}
There is no registered twitter account for this profile
Expand All @@ -105,7 +105,7 @@
<!--
Loops use the same syntax as conditionals, but work when <i>lists</i> are provided instead of scalar variables such as strings, integers, and dictionaries.
-->
<amp-list src="/static/samples/json/cart.json" layout="fixed-height" height="80">
<amp-list src="/static/samples/json/cart.json" layout="fixed-height" height="80" binding="no">
<template type="amp-mustache">
<div id="cart">
{{#cart_items}}
Expand Down
6 changes: 3 additions & 3 deletions examples/source/e-commerce/AMP_for_E-Commerce_Getting_Started.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@
Here is a sample how to render product name and price using amp-list:
-->
<amp-list height="24" layout="fixed-height" src="/static/samples/json/product.json" class="m1">
<amp-list height="24" layout="fixed-height" src="/static/samples/json/product.json" binding="no" class="m1">
<template type="amp-mustache">
{{name}}: ${{price}}
</template>
Expand All @@ -133,7 +133,7 @@
```
-->
<amp-list width="auto" height="400" layout="fixed-height" src="/static/samples/json/product-single-item.json">
<amp-list width="auto" height="400" layout="fixed-height" src="/static/samples/json/product-single-item.json" binding="no">
<template type="amp-mustache">
<amp-carousel height="400" layout="fixed-height" type="carousel">
{{#values}}
Expand Down Expand Up @@ -167,7 +167,7 @@
An easy way to provide personalized content in AMPs is to use `amp-list`. You can either use cookies (using the attribute `credentials="include"`) or AMP's [client id](https://github.com/ampproject/amphtml/blob/master/spec/amp-var-substitutions.md#client-id):
-->

<amp-list credentials="include" height="24" layout="fixed-height" src="/static/samples/json/product.json?clientId=CLIENT_ID(myCookieId)" class="m1">
<amp-list credentials="include" height="24" layout="fixed-height" src="/static/samples/json/product.json?clientId=CLIENT_ID(myCookieId)" binding="no" class="m1">
<template type="amp-mustache">
Your personal offer: ${{price}}
</template>
Expand Down
9 changes: 6 additions & 3 deletions examples/source/e-commerce/Checkout_Flow/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,8 @@ <h3>Review Order</h3>
layout="fixed-height"
credentials="include"
src="shoppingcart?clientId=CLIENT_ID(cart)"
[src]="shoppingCart.src">
[src]="shoppingCart.src"
binding="no">
<template type="amp-mustache">
<div class="shopping-cart">
<div class="item header">
Expand Down Expand Up @@ -265,7 +266,8 @@ <h3>Select Shipping Address</h3>
items="."
single-item
credentials="include"
src="/static/samples/json/addresses.json">
src="/static/samples/json/addresses.json"
binding="no">
<template type="amp-mustache">
<ul class="list-reset">
{{#addresses}}
Expand Down Expand Up @@ -367,7 +369,8 @@ <h3>Select Payment Details</h3>
items="."
single-item
credentials="include"
src="/static/samples/json/credit-cards.json">
src="/static/samples/json/credit-cards.json"
binding="no">
<template type="amp-mustache">
<ul class="list-reset">
{{#cards}}
Expand Down
10 changes: 7 additions & 3 deletions examples/source/e-commerce/Hotel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,9 +144,13 @@ <h2>When do you want to travel?</h2>
`amp-list` content takes the entire height on the page from the `height` attribute; after filtering, it could take unused space: we are resizing by binding the `height` attribute to the result of the height of the image plus the margins multiplied by the length of the list.
-->
<amp-list class="rooms"
layout="fixed-height" height="800"
src="https://amp-by-example-live.glitch.me/rooms" [src]="filteredRooms()" items="."
[height]="(80 + (16*2)) * filteredRooms().length">
layout="fixed-height"
height="800"
src="https://amp-by-example-live.glitch.me/rooms"
[src]="filteredRooms()"
items="."
[height]="(80 + (16*2)) * filteredRooms().length"
binding="refresh">
<template type="amp-mustache">
<amp-img width="108" height="80" src="/static/samples/{{img}}" lightbox alt="{{name}}-{{desc}}"></amp-img>
<div>{{name}} {{#petFriendly}}&#128062;{{/petFriendly}}</div>
Expand Down
3 changes: 2 additions & 1 deletion examples/source/e-commerce/Housing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,8 @@ <h2>Properties sold nearby</h2>
<amp-list width="auto"
height="150"
layout="fixed-height"
src="/static/samples/json/other_properties.json">
src="/static/samples/json/other_properties.json"
binding="no">
<template type="amp-mustache">
<a href="#" class="ampstart-card related m1">
<amp-img width="122"
Expand Down
5 changes: 4 additions & 1 deletion examples/source/e-commerce/Product_Browse_Page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,7 @@
autosuggest.endpoint + autosuggest.query :
autosuggest.emptyAndInitialTemplateJson"
id="autosuggest-list"
binding=refresh
>
<template type="amp-mustache">
<amp-selector
Expand Down Expand Up @@ -378,6 +379,7 @@ <h4>Color</h4>
layout="fixed-height"
src="<% hosts.backend %>/samples_templates/products?sortChoiceValue=price-descendent&searchColor=all&_=RANDOM'"
[src]="products.listSrc"
binding="no"
class="grid">
<template type="amp-mustache">
<a class="products" href="<% hosts.backend %>/samples_templates/product/[[$.Mode]]">
Expand Down Expand Up @@ -459,7 +461,8 @@ <h3>Bestsellers</h3>
width="auto"
height="160"
layout="fixed-height"
src="/static/samples/json/related_products.json">
src="/static/samples/json/related_products.json"
binding="no">
<template type="amp-mustache">
<a href="/samples_templates/product/preview/">
<amp-img width="640"
Expand Down
1 change: 1 addition & 0 deletions examples/source/e-commerce/Product_Page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -747,6 +747,7 @@ <h4 class="p2">Products that have been bought together</h4>
layout="fixed-height"
src="/static/samples/json/related_products.json"
[src]="myState.items"
binding="no"
id="show-more-list">
<template type="amp-mustache">
<a class="text-decoration-none p1"
Expand Down
2 changes: 1 addition & 1 deletion examples/source/e-commerce/Shopping_Cart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
2. Clicking on the "remove" button, updates an state object (`cartItem`), which, in turn, update two hidden fields on the form `form-cart-delete`, and also triggers a form submission. This form will call the server to update the cart, and update the `cartItemsList` object with the response.
2. The `amp-list` component contains the expression `[src]="cartItemsList.items"`, so that, when the `cartItemsList` object changes, as a result of the previous action, the list gets refreshed with the content of the updated cart.
-->
<amp-list credentials="include" layout="responsive" height="100px" width="500px" src="https://abe-cart-service.glitch.me/cart_items" [src]="cartItemsList.items">
<amp-list credentials="include" layout="responsive" height="100px" width="500px" src="https://abe-cart-service.glitch.me/cart_items" [src]="cartItemsList.items" binding="no">
<template type="amp-mustache" id="cart-items">
{{#isEmpty}}
<h3>Your Basket is Empty. </h3>
Expand Down
2 changes: 1 addition & 1 deletion examples/source/interactivity-dynamic-content/Advanced_Server_Request.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
<div submitting>Loading ...</div>
<div submit-success template="animal-template"></div>
</form>
<amp-list id="animal-list" items="." single-item template="animal-template" src="<% hosts.backend %>/echo" layout="fixed-height" height="50">
<amp-list id="animal-list" items="." single-item template="animal-template" src="<% hosts.backend %>/echo" binding="no" layout="fixed-height" height="50">
<div placeholder>Loading ...</div>
</amp-list>
</div>
Expand Down
1 change: 1 addition & 0 deletions examples/source/interactivity-dynamic-content/Autosuggest_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,7 @@ <h2 class="title">Autosuggest</h2>
[src]="query ?
autosuggest.endpoint + query :
autosuggest.emptyAndInitialTemplateJson"
binding=refresh
id="autosuggest-list"
>
<template type="amp-mustache">
Expand Down
6 changes: 4 additions & 2 deletions examples/source/interactivity-dynamic-content/Favorite_Button/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,8 @@
credentials="include"
items="."
single-item
src="favorite">
src="favorite"
binding="always">
<template type="amp-mustache">
<input type="submit"
class="{{#.}}heart-fill{{/.}}{{^.}}heart-border{{/.}}"
Expand Down Expand Up @@ -241,7 +242,8 @@
items="."
single-item
noloading
src="favorite-with-count">
src="favorite-with-count"
binding="always">
<template type="amp-mustache">
<div class="favorite-container">
<input type="submit"
Expand Down
5 changes: 4 additions & 1 deletion examples/source/interactivity-dynamic-content/Linked_Dropdowns.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
<amp-list layout="fixed-height"
height="25"
src="/static/samples/json/linked_dropdowns.json"
binding="refresh"
single-item items="." noloading>
<template type="amp-mustache">
<label for="country">Country:</label>
Expand All @@ -87,7 +88,9 @@
height="25"
[src]="cities || '/static/samples/json/linked_dropdowns.json'"
src="/static/samples/json/linked_dropdowns.json"
single-item items="." noloading>
binding="refresh"
single-item items="."
noloading>
<template type="amp-mustache">
<label for="city">City:</label>
<select [disabled]="!cities" disabled id="city">
Expand Down
2 changes: 1 addition & 1 deletion examples/source/interactivity-dynamic-content/SeatMap.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@
<div>
<h1>Seat map</h1>
<div class="seatmap-container">
<amp-list layout="fill" src="/static/samples/json/seats.json" items="." single-item noloading>
<amp-list layout="fill" src="/static/samples/json/seats.json" binding="refresh" items="." single-item noloading>
<!--~
The seatmap with the availability of the seats is rendered via `amp-list` so that we make sure always the latest
data are available to the user.
Expand Down
2 changes: 1 addition & 1 deletion examples/source/interactivity-dynamic-content/SeatMap_Multiple_Selection.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@
-->
<div class="seatmap-container">
<h1>Seat map</h1>
<amp-list layout="fill" src="<% hosts.platform %>/static/samples/json/seats.json" items="." single-item noloading>
<amp-list layout="fill" src="<% hosts.platform %>/static/samples/json/seats.json" binding="refresh" items="." single-item noloading>
<template type="amp-mustache">
<amp-pan-zoom layout="fill" class="seatmap">
<amp-selector on="select:AMP.setState({
Expand Down
Loading

0 comments on commit 48328f7

Please sign in to comment.