Skip to content

Instantly share code, notes, and snippets.

@king-panda
Last active May 19, 2019 07:53
Show Gist options
  • Save king-panda/df31dc4e48e18519419bd5957b47369c to your computer and use it in GitHub Desktop.
Save king-panda/df31dc4e48e18519419bd5957b47369c to your computer and use it in GitHub Desktop.
【AMP】amp-listで取得したデータをamp-bindを使ってリアルタイムにフィルタリングする ref: https://qiita.com/kingpanda/items/d086aa5cdb4a8dae43be
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<p [text]="'Hello ' + foo">Hello World</p>
<button on="tap:AMP.setState({foo: 'amp-bind'})">TAP</button>
<amp-list width="auto"
height="400"
layout="fixed-height"
src="https://demo.wp-api.org/wp-json/wp/v2/posts"
[src]="'https://demo.wp-api.org/wp-json/wp/v2/posts' + foo"
class="m1"
items=".">
<template type="amp-mustache">
<div>
<a href="{{link}}">{{title.rendered}}</a>
</div>
</template>
</amp-list>
<button on="tap:AMP.setState({foo: ''})">全て</button>
<button on="tap:AMP.setState({foo: '?categories=1'})">カテゴリー1</button>
<button on="tap:AMP.setState({foo: '?categories=2'})">カテゴリー2</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment