Как получить удаленные данные с помощью amp-bind и amp-усов?
Я новичок в использовании усилителя, у меня есть вопрос, касающийся использования компонентов amp-bind с amp-mustache, в приведенном ниже примере, как бы вы поступили, перелистывая изображение карусели с предварительным просмотром?
пример JSON, который будет возвращен из бэкэнда и View, где он будет отображаться
<div class="col-12 px2 md-pl7">
<amp-carousel id="carousel-with-preview"
width="400"
height="300"
layout="responsive"
type="slides">
<amp-img src="https://loremflickr.com/400/300?random=1"
width="400"
height="300"
layout="responsive"
class="mb1"
alt="a sample image"></amp-img>
</amp-carousel>
<amp-list width="auto" height="80" layout="fixed-height" src="https://exemple/api/products.json">
<template type="amp-mustache">
<div class="carousel-preview">
{{#image}}
<button on="tap:AMP.setState({product: {selectedSlide: event.index}})">
<amp-img src="{{thumbs}}"
width="60"
height="40"
layout="responsive"
alt="a sample image"></amp-img>
</button>
{{/image}}
{{^image}}
Not imagem
{{/image}}
</div>
</template>
</amp-list>
пример JSON, который будет возвращен из серверной части
{
"items": [
{
"name": "Sprocket Set",
"description": "Steel, designed for long lasting stability.",
"price": 581,
"options":[{
"color": "blue"
}],
"image": [
{
"thumbs": "https://loremflickr.com/80/60?random=1",
"larger": "http://lorempixel.com/720/480/"
},
{
"thumbs": "https://loremflickr.com/80/60?random=2",
"larger": "http://lorempixel.com/720/480/"
},
{
"thumbs": "https://loremflickr.com/80/60?random=3",
"larger": "http://lorempixel.com/720/480/"
},
{
"thumbs": "https://loremflickr.com/80/60?random=4",
"larger": "http://lorempixel.com/720/480/"
}
],
"selectedSlide": 0
}
]}