<amp-state id="filter"> <script type="application/json"> { "order": "atoz", "size": "small" } </script> </amp-state> <button on="tap:AMP.setState({filter: {order: 'atoz'})">Increasing</button> <button on="tap:AMP.setState({filter: {order: 'ztoa'})">Decreasing</button> <amp-list ... [src]="'/api/search?order=' + filter.order + '&size=' + filter.size" ...>
<amp-list src="/api/search?order=atoz&size=small" [src]="'/api/search?order=' + filter.order + '&size=' + filter.size" ...>
<div hidden="false" [hidden]="filter.changesMade" > ... server side rendered content ... </div> <amp-list hidden="true" [hidden]="!filter.changesMade" src="/api/search?order=atoz&size=small" [src]="'/api/search?order=' + filter.order + '&size=' + filter.size" ...>
<amp-list src="amp-state:searchResponse" [src]="searchResponse.items" ...>
<amp-state id="searchResponse" [src]="'/api/search?order=' + filter.order + '&size=' + filter.size" > <script type="application/json"> ... server side injected initial AMP state goes here ... </script> </amp-state>
<amp-img alt="Stack of blueberry pancakes with powdered sugar" src="/images/pancakes.jpg" layout="fill" > </amp-img>
