Как получить удаленные данные с помощью 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
    }
]}

0 ответов

Другие вопросы по тегам