Last active
May 19, 2019 07:53
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p [text]="'Hello ' + foo">Hello World</p> | |
<button on="tap:AMP.setState({foo: 'amp-bind'})">TAP</button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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