handlebars.js и скрыть, если список - PullRequest
Новая
       36

handlebars.js и скрыть, если список

0 голосов
/ 20 марта 2019

Пытаясь выучить этот handlebars.js, и в настоящее время у меня есть: 

<ul class="productView-thumbnails"{{#gt product.images.length 5}} data-slick='{
                "infinite": false,
                "mobileFirst": true,
                "slidesToShow": 5,
                "slidesToScroll": 1
            }'{{/gt}}>
            {{#each product.images}}
                <li class="productView-thumbnail">
                    <a
                        class="productView-thumbnail-link"
                        href="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
                        data-image-gallery-item
                        data-image-gallery-new-image-url="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
                        data-image-gallery-zoom-image-url="{{getImage this 'zoom_size' (cdn ../theme_settings.default_image_product)}}">
                        <img class="lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage this 'productview_thumb_size' (cdn ../theme_settings.default_image_product)}}" alt="{{this.alt}}" title="{{this.alt}}">
                    </a>
                </li>
            {{/each}}
        </ul>

, поэтому мне нужно что-то с эффектом оператора IF, который утверждает, что если есть только 1 изображение (li), тогда примените отображение: none для класса productView-thumbnails

Я пытаюсь скрыть весь UL, если возвращен только один LI. Это вообще возможно?

1 Ответ

0 голосов
/ 20 марта 2019

Вы должны только структурировать свои блоки руля.Элементы управления на руле не являются элементами HTML, поэтому вы можете заключить частичную структуру HTML в операторы if.

Учитывая, что у вас зарегистрирован gt-helper: 

{{#gt product.images.length 1}}
<ul class="productView-thumbnails"{{#gt product.images.length 5}} data-slick='{
…}'{{/gt}}>
{{/gt}}
{{#each product.images}}
  {{#gt product.images.length 1}}
            <li class="productView-thumbnail">
  {{/gt}}
  …
  {{#gt product.images.length 1}}
  </li>
  {{/gt}}
{{/each}}
…
{{#gt product.images.length 1}}
</ul>
{{/gt}}
...